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200 3- جع . الا لالالانا 0 


2. زع 1.0010/63110 2606600 2 
2 2 [ /لمامه. اع ]انلا © 








مكدمة 7777ب 10*25 
حول الكتاب والاستفادة منه ا يإ 
الباب الأول : مقدمة عامة ا ااا 171111 
الانترنت ا ا 31 #31 اياي 0000 م« 
أنواع المواقع الإلكترونية ا ااا 000 
طريقة عمل المواقع الإلكترونية ا ا يا ااا 0000000001 
النانا الثاني 111 1آ1 ة0ة ‏ ةذزةت3ت3733ج73ج7ج73ج3جُُُْأأام0 اا 0000م 
البداية مع .1117/11 ليل كك“ ج4#ححمللدكك مازتلا 22 ت1727070220279729229292907970222222222 
إنشاء صفحة ويب وح ل 44ف ك6 24460ب 7252 2 ة 6 حًحذط6ححذؤ:].0 : 6بب74>2 0000 
علامات ترميز 1385 110/1 ا ا م 0 
محرر الك .111311 (21231 ,رمؤزلع ) كحي انوس سوس وس سحو لمج نو ند المم نمه لق ل ا ا م 11 
عناوين اك .5113/1 2113/1 وعمتلدء] ) ل تج ام ل 
فقرات ال1113211 11123211 وطامممعممدم) آنا ىا أ" ”7 ءا ءالوو ا امسسسْسْسسسسس ‏ اإمسس ممست ا 
روابط .111111 :111311 وعلمنآ) مممم مه ممه ممم ممه ممه ممم ممه ممم ممم ممه عم ممم عه وه م كه ووو لو ل م 1١‏ 
التعامل مع الصور اك 117/1 (11173/1 5ءعع128) ال ااا ا 
رأس ال .1113/11 (111311 لدعط) لا ا ااا اااي ااا ااام 0000 
ننفسيق نص ال 111/1 (ع16108ه2مءهء 11811) 12 
خصائص الخطوط في ال 1117/1 (5001 71/1لا) 1 1 2 2 2 2 ة2ة0ة0ة060606060606060 159000 
الجداول في ال 1112/1 111211 دعاطة1) بي :221222 2222222 رو 000122 
القوائكم في اك 11111 111310 5اذز.1) ا ااا ااا اااي ااا ااا 110 
تطبيق عام حول ال .111711 ا ا ا 0 
خطوات التطبيق ااا 1077 
شرح كود التطبيق (111/11]) 0 
الباب التالث 055 ااا ااا 0001 
برنامج الدريم ويفر (056© أعناوع /لامروع0م ع6 00م) اا اا ااا 

م 


ماهى لغة او تقنية ال 055 ؟ 00 
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طرق العمل على ال55ه 0-98 


عناصر هامة تستخدم ال 055 في ال 71/1 (/ذ0 - 0وم5) 0 5500 
كود أو وسم الما/ا0 (186 دمو أدأ/ز0) اااي ااا 110 
كود أو وسم ال1م52 (186 11ثم5) ااا ااا ااا ااا 12100 


طريقة عمل ملف ال255 وربطه بصفحة الموقع . 9 **21 


ووو 


خاصية الوراتة ا ا 1212570 
الكلاسات والهوية فى ال 055 (10, 5ع01355© 055) 221113 
خاصية ال 01235525 إزرت---- - - - - 0 30 3*3 #3 ااا 110 21211 


خصائص الضبط فى ال055© 1010 1+1 #1 # #[ [ [ [ [ [ [ [ |[ | |[ |[ |[ [ [ [ [ [1[1ز1ذزذزذزذزذز1 1 “03# 


خاصية الطول والعرض (موأء2 300 غ0 1/الا 055) 53530 


خاصية زوايا الحدود (5ب2301-:ع50:0 055) 2/0 
خصائص الخصوص (5غ6)ءم2520 ع1 055) ا ك7 ا 
خاصية الاتجاه (150مءه01) 000 *ش#*1/ 
خاصية الإرزاحة (ى030015) ...سي ...سد ...ا ...© ...لين 


خاصية ( اللون - الحجم - اسم الخط - أخرى ) 0 


خاصية الظل 5030010 اع 1) 000 


خاصية التعليق (دامع مامماه0) 0 
القوائم (ددامه/١)‏ اي ااا 2ط 
خاصية الحركةٌ زع6ب3:0/١)‏ 23*71 
خاصية الخلفيات (0م0به2ع8اء83) 0 


خواص الخلفية (أجعمع-0صمناممعماء83 ع مسأ أوه0م-0مناممعاء83) 


اضافة الخطوط للموقع 000 





الباب الرابع 21125 يك 7115501 00000 ذ1ذزذز[ 7[ |[ [ |[ |[ |[ |[ اة212121 1 *#*#*1001 
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وه 
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17 
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1 
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/ا1 
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لغة البي اتش بي (505م) ب1[1[19[ز[1[1[1[1[1[ [ [ 00000001 
متطلبات بي ائنش بي ا ااا ااا 0000100 
السرفر المحلي وطريقة تركيبه (0ع/داء؟ مماد/د) 21111 
طريقة عمل السرفر (0عء/دمء5 م0 3/ىا) 89 32*53 
اول تطبيق في (ملم) و10 1 1 #1 #*#*66#7#7##ْ6 م ا م 
تضمين كود 5015 في صفحات الويب 600-92 7#680673أ00007##ُ7777777ْ7ْ0ْ:ْ:0ْ0: :ا 000 
تضمين التعليقات في الكود 000000 
أنواع البيانات في ملام ل م مم مه مه عه مه ههه م م مه ا ا ع 3 
القيم المنطقية (مد80016) 0 
قِيم الأعداد الصحيحة (5اء8ع15) يي ا دب001010101010101227 0 7 ا 
البيانات المركبة (دوءملا! 0315 0دناهم ممده0) ال ا 2199119010 ال 
المصفوفات (413/5) ####ت ا #ا ددر | اا22200 الل ل 
المختغيرات (د5ه١3:150/)‏ آ با كي الى قار الحا 7 ا ال ا ال را لل 
التعبيرات (5١5ودع:م<«ع)‏ ا اي ا يا ااا ا اا ا 5050ة#1#1#1ة1111 ذم اا ااا مم ااا لل 0 
عوامل الأسناد أو التعيين (26015عم0 أمع مامع أددم) مسا .. اسار ين ل لل "الم لمم م ممم ممم م ع ١6137‏ 
العوامل المنطقية (015غ23عم0 (1وعأع6٠)‏ 00000 
عوامل المساواة (260:5/ءم0 ب6ذادباوع) و م يي افر 
قواعد التحكم (دعناءن 5 ا10أمم2) ج44 #جه4جح>>“>ي>7“ 7 ببحلطلطج0لييو لكككحةهةهة+#+ة4ي>7###4آ4777 51و56 970464764727:465646ر7ب77ر7ر7بررر0ط(1ص1 
تعليمات الشرط (5أمع ممعغ 562 اهمه 0016ه60) 52اة073737ا000أ[7أ070707070أ0أ/0000ْأ700ُخججُ7777ج9ْجْ9ُْْْْ:ازاااأ6ا6ا م 
تعليمة )١‏ أمع«رمعغ563 15 ع1 0 
تعليمة التبدييل (أمع2معغ5626 داع ]أ/لاد ع15) 22222222255598 ر0ر3737370732323232375757ذ3ذ73ذ73703003037ْخخ9خااااا 20 
تنعليمات الحلقات او التكرار (5+م06ء563 108م0ه٠)‏ 1 
تعليمة عاأطاننا (أمع ممعغ3غ5 عاأطنم عط1) #3#7123399ة#ة#ذأ[11أ1أأااا ا 0 0 0 2010201 2 0.٠.0.023‏ 
تعليمة عاأطانلا 00 (أمع مماعغ3غ5 عانطن هل ع15) 2 
تعليمة (00]) (أدع لاع ج56 10 ع15) 0208 ة 0 0 0 0 0 0 0 0 223009909000500 
الدوال (5ممعءمبط) 8886839 2222928:-:2722252:999592:22:2ج 22ر22 و1٠رط2]ة1وطة0ة0ة0ة0ة0ة0ة0ة0ة0ة0ة0202020‏ 0 
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المصفوفات (5/إ48113) 1,9,5 


نماذج الإدخال (وصءوع 1/1 نا) ”2 
حقول الخص (5لاءا6 <«©1) 2111110000 
خيارات الزوع«هاءعع06) 000 
زر الإرفسال (0مغان8 غأصصطب5) ل 
القائمة المنسدلة ١5١‏ 1/0ا000-00) اه 
منطقة الخص (3262 «ء1) 125010 
دالة 057ه_5 و7ع6_؟ 0 


تطبيق حسابي باستخدام الدوال والفورم ل 


نأمط للم /إا/اا مام 300 01كن/اا/ا 0 


عملياتث ١م00‏ 3لامامطام 00 
إِذ شاء قاعدة بيانات “7 ا د في نا ايفين يتن 
إٍ 
إضافة بيانات (صفوف) إلى الجداول 2-7 7 ١ ١‏ 


تعديل وتحديث فى قاعدة البيانات غ2 


حذف صف أو بيانات من الجدول يي ار ارد 


»»4+ 


ربط ملام هع ١/1750‏ 20000000009 


إدخال البيانات بواسطة |١587‏ 1 1111 


إخراج البيانات بواسطة 1عغاء5 0 


تعديل وحذف البيانات بواسطة (ع1غاء0 - ع7ىممنا) 


التعامل مع الصور 0 
الحماية بواسطة ال/55101ع5 6 
الكوكيز (0001185) 2111111 
الفرق بين ال 555101١‏ والكوكيز 2000115 0 
تطبيق الكوكيز ا 


لاع 0 زالجي كويري 117 


القوالب الجاهزة ”ه25 


نشاء جدول فى قاعدة البيانات 9 
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١ >16 


١7 


١7 


ا 


١١ 


١5 


١5 


تطبيق عام حول 8م »ع 55 يك 1101لا ع ١/1501‏ 


4» ع 4©» 
المرحلة الاولى (التصميم) ش01 
المرحلة الثانية (قواعد البيانات) 1329 13 131 0303*3*3*3ْْْْخْأأا 1000 111113101 


مرحلة ربط قواعد البيانات مع التصميم 2ة0ة0ة0ة0ة 0 000000000000000 


رفع الموقع على السرفر وإطلاقه 000031 01 01 ا31#31#“#31أ#آ3أ1#ذ 0 


الاستضافة 01100 321111 


تنزيل جوملا من الموقع الرسمي وتركيبها ممع م عم قلط عط عطق6 عي لع عل ع وين ع لجسي ير ده ممم ةعم ع أ عععة مامه لمعه سمه عاطم ع ممه 


لوحة تحكم جوملا اا 70 ”2*5 
إنشاء الأققسام 7 د 2020590 0 ا090ا000ا0ا0ا0* | |0000 


التحكم بالمجلدات والصور ا ا ااا اا ااا ااا ااا ا اا 9200 
إضافة مقالات “ب “ب 1930 1 1[ ز1ز17[”3313131|#أ[1 000 
القوالب (دع:دامممء1) 1 1 1 0 


أماكن الموديولات (د5ده511ه25 عاب00/١)‏ ا اا ااا ااا ااا ااا ا 111 


»+» 
» »»+© 


تركيب الموديولات ب 0 23 
ا 000007 5 
إنشاء القائمة وربطها بالأكسام ا اا اا ا 21000 


تعديل وإضافة شعار للموقع ضحد يي 


التعديل فى ملفات القالب (ملفات ال255) | # #[#[#[#[#[#[#[#[#[#[#[ # [#[#[#[#[#[#[#[#[#[#[#«#[#[#[#[#[#«#«#«[#[#|#|ز4/4ز#إ[#|[|زذزذز[ز[ذز[ز[ز[1[[1[1آآ[أآآآآآآأ 0 


إضافات التواصل والمواقع الاجتماعية 00 + + + زؤزؤزذز[زؤز[ز[[[|[|[|[|[|[|[ | |[ |[ ا ا *#“©”2101001# 
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55١ 
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577 
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551١ 
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ربط الموقع بصفحات التواصل ة0ة ة ة0ة ةي ة ة 020070000022225 


تعريب الموديولات 155 
إضافة موديول البحث لب 010 


تعديلات عامة 1000049زذز5 ز1 151515 ذز1[|[|أ|أ[1[|أ|أ[أ|أ||أأذأاااااا ااا 00 


تركيب المحرر (102) 00 0 0000 07073070230 0|0|0000أ007خاااا ا ل000100111#1#1#1#1#1 000000 
إضافة الحقوق للموقع ا ااا ااا ااا ااا ااا ااا اا ااا ااا ااا اا ا 0 


إضافة عنوان رئيسي للموقع ا ا ا ا ااا ا اا ا ااا ااا ااا اااي ا ااا ااا 70000100 ك1 


إضافة البيانات الوصفية ااا ايي 000 


»» ©»»4+ 


حذف البيانات التجريبية ا ا ا ا ا ااا ااا ااا 211111 


تجهيز نسخة من الموقع للرفع او 1«#ظ«ظ'|]1|1 1 1[ 1[ 1ز1ز1زذز1#3331<1أ0000 0000 
تركيب الموقع 1 1 1 0010131311 
الناب السادس ()[آد امح ال 
مقدمة حول محركات البحث و 50 8 ش51 


كيف تعمل محركات البحث مذ را 2١#‏ 


نصائح عامة لتطوير استرانئيجية جيدة فى (550) 


أساسيات (125أ835 0ع 5) ا لل ل ا 


تحسين هيكل الموقع الالكتروني 000 
التحسين الامثل لمحتوى الموقع 0 
التعامل مع خوارزميات او برامج البحث 0ط 
متابعة وترقية الموقع الالكتروني 0 
أدوات مفيدة لتعزيز نجاح الموقع في 50 00 


معد الكناب الالكتروني 11111111 


| 88 . 0012/3221  . 2 
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إدلدنا 


515 


51١ / 


51 


51 


5148 
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5١ 


إحتانا 


ارلا 


57 


انرا 


5 / 


عمتسن 


5٠ 


16 


تعلم البيرمجة 


ع1 1,002,537 | تسم سبرمية 


عومدوع ارا ندعء5 لم اللستتتيي عوتط عنا| | 73 


ا 5 
0 





تحميل المزيد من الكتب 


.2171303 3 ط-212 3 © ل . اما 


إنضم لصفحتنا على الفابسبوك 
/ 22 . 00112/23121165 . 32652001 2 . 171777 / / : 125 








بسم اله الرحمن الرحيم 


مقدمة 
الحمد لله والصلاة والسلام على حبيبنا محمد (صلى الله عليه وسلم) وعلى اله وصحبه وسلم وبعد : 


بداية نتمنى من خلال هذا الجهد المتواضع (كتاب تصميم المواقع الالكترونية) أن يجعلها الله في ميزان حسناتنا وأن ينال رضى 
واستحسان القارئ الكريم وأن يستفيد منه في حياته العلمية والعملية كما ونتمنى كل من يستفيد من هذا الكتاب ان يدعوا لنا ولوالدينا 


بالهداية والمغفرة والعفو والعافية والتوفيق دنيا وآخرة. 


إن هذا الكتاب الالكتروني يعتبر البداية لكل مبتدأ في عالم المواقع الالكترونية ومحطة انطلاق في تعلم كل جديد وما يفيد في تصميم المواقع 
الالكترونية واشهارها في محركات البحث وكان الغرض الرئيسي منه هو تعلم انشاء مواقع الكترونية بواسطة نظام ادارة المحتوى 
(!7001218) وبقية الفصول تم تعليمها لكي نعرف كيف نتعامل مع المواقع الالكترونية وكيف تعمل كماهي ايضا لمن يريد البداية في عالم 
المواقع. وللعلم فإن جميع الشروحات في هذا الكتاب وكل خطوة فيه تم تنفيذها وتطبيقها ونقلها كما هي شرحا وصورة وذلك ليكون التعلم 
مبني على اساس التجربة والخطوات الصحيحة وبكل وضوح بعيدا عن الغموض والسرعة وتعدي الخطوات. كما يتم سرد الاساسيات قبل 
تنفيذ عمل جديد ولذلك لابد من الانتباه في التسلسل والفهم لأن أكثر الخطوات تتطلب فهم واستيعاب التي قبلها. 


هذه هي النسخة الاولى من الكتاب وسيليها نسخ جديدة بتعاونكم أيها المستفيدين والقراء واقتراحاتكم واضافاتكم اليه عن طريق التواصل 
معنا وابداء الآراء وتصحيح الاخطاء ان وجدت. جميع التطبيقات في الكتاب بدء من 2717/11 » 2119 » 055) ٠‏ 710012114 تم ارفاق 
رابط لجميع ملفاتها والتي تم تطبيقها خطوة بخطوة ويمكن الاستعانة بها وقت الحاجة. 


كما يتم من خلال هذا الكتاب فتح مجال التعاون التجاري والشراكة في مجال تصميم المواقع الالكترونية واشهارها واستضافتها عبر رواد 
التكنولوجيا والراعية لهذا الكتاب لمن يرغب. ستوفر رواد التكنولوجيا استضافة لكل من يرغب في عمل موقع الكتروني سواء خاص او 
تجاري وسنوفر ما يلزم من الدعم والحماية والمساحات الكافية لكل متعامل معنا. كما تقوم رواد التكنولوجيا بالتعامل مع كل من يقوم بعمل 
مواقع الكترونية ويحتاج للدعم خصوصا في نظام ادارة المحتوى (!7001212). وليس فقط من يقوم بعمل المواقع الالكترونية بل تم فتح 
مجال لمن يرغب بالتعامل معنا في مجال تسويق المواقع الالكترونية بالعمولة والتي لا تقل عن 9,١5‏ لكل موقع يتم التسويق له او بإحضار 
عملاء لرواد التكنولوجيا دون ان يتحمل المسوق أي تبعات تصميم او فنيات أخرى. 


هذا والله ولي التوفيق». 
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حول الكتاب والاستفادة منه 


كتاب دورة تصميم المواقع الالكترونية 


سواءً كنت حديث العهد أم خبيراً في التعامل مع المواقع الإلكترونية» سيعلمك الكتاب طريقة انشاء المواقع الإلكترونية وطريقة عملها بدون برمجة 
معقدة. وليس المواقع الالكترونية فقط ؟ يقدم الكتاب ايضا أيضًا رؤى فنية مفيدة حول إشهار المواقع بشكل عام نظريا وعملياً. 


ما الذي ستستفيده من الكتثاب ؟ 
بإمكانك إنشاء مواقع إلكترونية وباحترافية بأنواعها بمساعدة الأنظمة والبرامج الحديثة» علاوة على خبرة في مجال المواقع والتوسع فيها يمكنك من 


خلالها شغل وظيفة وبكفاءة في نفس المجال وتوفير الأموال بالنسبة للمؤسسات. فضلاً عن إمكانية الدخول في عالم التجارة الإلكترونية بدون برمجة 


وتعقيد وفي وقت قصير. 
من بمكنه الاستفادة من الكتاب ؟ 
يدعم الكتاب كل الاشخاص الراغبين في تعلم انشاء المواقع الالكترونية والخريجين والمهتمين في عالم المواقع الإلكترونية والتسويق الإلكتروني» وكل 


من لدية خبرات تسويقية ويحتاج لخبرة إلكترونية واهتمام في تنشيط تجارته ومؤسسته إلكترونيا والإعلان عبر الإنترنت ومن يبحث عن مهنة 


ومهارات جديدة وحديثة. 
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الباب الأول مقدمة عامة 


الانترنت 

ظهرت شبكة الإنترنت نتيجة لمشروع أربانيت الذي أطلق عام 155١م‏ ء وهو مشروع من وزارة الدفاع الأمريكية .أنشئ هذا المشروع من أجل 
مساعدة الجيش الأمريكي عبر شبكات الحاسب الآلي وربط الجامعات ومؤسسات الأبحاث لاستغلال أمثل للقدرات الحسابية للحواسيب المتوفرة. 
في وقتنا الحاضر أصبح الإنترنت من أساسيات التواصل والأعمال في جميع أنحاء العالم ويوما بعد يوم تزداد اهمية هذه الشبكة العملاقة التي جعلت من 
العالم قرية واحدة. أصبح الإنترنت بوابة للاقتصاد والسياسة والتواصل الاجتماعي لشعوب العالم ولاشك أيضا أنه اصبح العالم الرقمي الذي يتواصل 
الناس من خلاله تحولت جميع التعاملات التجارية وغيرها من العالم الحقيقي إلى العالم الرقمي ويعتمد عليه الكثيرين من التجار والباحثين والمؤسسات 
بمختلف مجالاتها. 


هي شبكة عالمية تربط بين حواسيب العالم وتسمح بتناقل البيانات بمختلف انواعها وبنطاقات (حجم التناقل ) مختلفة منها ما هو عبر شبكة محلية أو 
عالمية. 

ماهي مواقع الإنترنت 

عبارة عن صفحات مبرمجة بأي لغة من لغات الويب تقوم بعرض وأخذ البيانات على شبكة الإنترنت. وتختلف المواقع عن بعضها من ناحية عملها 
وبرمجتها وطريقة عملها .ومن أمثلة لغات البرمجة المستخدمة في برمجة المواقع 


آاخخذآ1 14 14ئآ 511/11 5001 111 11ا". كم - كناكخذظآ 12414 1150021 111 2112 


5 هخم و٠‏ ٠«؟‏ «ه٠‏ 
انواع المواقع الإلكترونية 
مواقع ستاتييك : مواقع عادية تحوي صفحات ثابته لا تتغير إلا برمجيا بتغيير الكود الخاص بالصفحات وتقوم بعرض البيانات بشكل ثابت كما أنها غير 


تفاعليه أي لا تحوي قاعدة بيانات لإدخال وإخراج البيانات. وهي الأقل استخداما على الإطلاق ويتم برمجتها غالبا ب لغة الوصف ,ر11717/11. 


مواقع تفاعلية : مواقع تحوي صفحات انترنت تفاعلية تقوم بعرض البيانات من خلال قاعدة بيانات تستوردها الصفحات لتعرضها للمستخدمين وتقوم 
الصفحات ايضا بإدخال البيانات إلى قاعدة البيانات من خلال المستخدم المتفاعل مع الموقع سواء مدير الموقع او الزائر. وهي الأكثر استخداما ويتم 
برمجتها غالبا بأحد اللغات البرمجية التالية: +[5151+5715 5001 7121 '4512.11191 - 24141845115 501 3515 لتر 12م 
5 1 . 
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طريقة عمل المواقع الإلكترونية 


رعوبلوم8 طء/اا 

مز عا4عهة ععمة 5ء للا نه أقغيعم, نم 
09 1 

اع ونلمعط ناعللا نامبا 





و إبترع5 عوورن لما مزه توزه2] 
عا أه 6زم قرأ محتصضول عط؟طةآ وياععطء 5ذلإ2] 
معطأ 505 لحه لعنعماوع مر عأزوطع/اا 
بعبرعو واء/ما 5أ| أ0 600055 





مرعبصعذ طء/الا لع6+وه0 | 


مط؛ عأعمط ولودعمو عوبدمهمو 5طم/لا وام ]زو 506 | 
عاةعه عومم طع/لا لمأكعيوع؟؛ عطةه1] وأول 





هنا شرح مختصر حول كيفية عمل المواقع الإلكترونية :عند إدخال عنوان الموقع في المتصفح الخاص بك أو النقر على رابطء هناك الكثير من الاحداث 
تدور وراء الكواليس لتحصل على المعلومات التي تبحث عنها وكي يظهر الموقع امامك بشكله الكامل . 

عند عرض موقع على شبكة الإنترنت» متصفحك يحتاج أولا إلى العثور على ملقم ويب كي يتم تحميل المعلومات منه. فمن خلال ال 17275 يتم التحقق 
من اسم الموقع إذا كان موجود على الإنترنت ام لا في حالة تم العثور على العنوان وأنه موجود على شبكة الإنترنت. يقوم السرفر الذي يحوي الموقع 
وصفحات الموقع بإرسال البيانات وصفحات الإنترنت الخاصة بالموقع المطلوب إلى متصفحك سواء الصور والبيانات وغيرها . 
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111 1 


111125 1آ منكا:1 د1١‏ اغىع 1 *دعم 15 101 ك0 نواه 111311 


لغة وصف صفحات الويب 
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الباب الثائى .111111 


البداية مع .1111311 


نبدأ في هذا الفصل مع أهم وأجمل وأبسط لغات صفحات الويب وهي لغة ال ,1117/11 


تعريف لغة ال 111711 : 
هي لغة لوصف صفحات الويب. 
هي لغة تقوم بترجمة صفحات الويب وعرضها على المتصفح. 


هي لغة ترميز تستخدم علامات الترميز. 


7 00 5 «+ه 
إنشاء صفحة ويب 


»> »©4© 


سنقوم سويا بتصميم اول صفحة ويب وأول موقع في هذه الدورة. والطريقة كالتالي: 


قم بإنشاء مجلد خاص على سطح المكتب وسميه بأي اسم وليكن (2295961) . نقوم بفتح المجلد الذي أنشأناه ثم نضغط بالزر الأيمن للفأرة ثم نختار 


جديد) ثم (مستند نص). 


]علامعآ 
أناء 51016 


قاعدة بيانات ودوععع لثم :مدوم زا 

عالط غأمعكمملعءثم طووا 

غ003 

لاع تناء 00 رملأا أمومى اا 

غ77ناء 00 أدصنامل 

أ0 ماع رده 0 خ11270501/! عرض نقديعي من 
]ع داوااطن8 غ501م112/! مستند 

عا متصصالالا 

انا 00 مع 1 


عا ماممالالا 
عاط عملت مامص الا 





عووع]ع 1ر8 


» ©»+ 


2 . 2223 3ط/عده» . 558 | تعلم البرمجة | 0تهن . 32202203 ط- عد د16 . جما 


اعع»ع غ506م22 1/11 ورقة عمل [ ا 


© [5] كلم ل 


زا نكم نك قن قن ف 


2 


سر نص لص جرم | 


م 
٠‏ 


54 


اماك الا 

باط غ501 
لاط من1ه616) 
طععماع 8 


ماع لعامغ كاطة عداحوصم ددن 


عغوجم 
أناء ]ورا عغجووم 


عحصووع8 ملمنا 


ءانا ع رقطذ 
مزامنة المحلدات المشتركة 
باباع إذا 


كع اع رمرم 


نصع اسم معين للمستند مثلا : (1571 115ل أو أي اسح. نقوم بفتح المستند ونكتب التالي: 














<< للاماما 11 > 
00> 


<1/ ه11 عوع 71 2117 1ه 
<ج2/,ع> . طاوةوع ممدعهم 21258 لدرمه» 


دبال مط ره 
< ل1نتعا ا > 


بعد الانتهاء من كتابة الأسطر السابق نصل إلى الخطوة الأهم وهي القيام بحفظ الملف ولكن طريقة الحفظ هنا مختلفة نوعا ما عن أي حفظ لأي ملف 


نضغط على (ملف) ثم ( حفظ باسم ). ستظهر الصورة التالية: 


22 ؟ع اه بدع لذا > عداموو0 


2 


7500110 عقن عرمولا صيحقت - 
7م 4ط طاع مرك ا؟_لامم 0 ممةاى 0 للا 
0005 -[ 
2]) وععوام غمعععم ري 
عم نواد ح” 





كع قرطلا 9 
ك0 عد 


ع أكنال/اا الى 
كع]ناك 01 |اخآ 
دمع ٠/10‏ الكل 
١! 4‏ 83 |« 
5 6ط طاع اذ ا]_لاحم ‏ بعصررهم عاط 


:م 35 ع5310 


(لط.*) كاأرع17اناء هنا مه 1 
ال 11-7" 
: ىرع لاوغ علال] + 


أسفل اسم الملف الذي أنشأناه مكتوب بالإنجليزية حفظ نوع الملف ك نضغط عليها ثم نختار (جميع الملفات) هنا الصورة باللغة الإنجليزية يمكنك تتبع 


الصورة والترجمة .ثم ننتقل إلى اسم الملف بدل ان كان الاسم ينتهي ب )6 نقوم باستبداله ب 11031 وسيصبح اسم الملف كالتالي: 
تغط طع 1/115 


بعد الحفظ سترى أن شكل الملف قد تغير وأصبح شكله كما في الصورة أو حسب المتصفح الذي تستخدمه: 


 ][[/ ©‏ + -23 ع اه] برعلا نا * طاغانثا ع نواد * بصوعطنا ماع ناعم[ > ععاموو01 
#ططاع اذ ا؟_لزلم ‏ «< اجمغحاءطع مر غىاط_بزحم 6 2 عمنتبويد] د 
معنا نا مه 1 أ7ناء 00 ااا ]ل عصصمعطن) 
وعغرط 93 كعغرط 93 مصددا الا 
0015 س1 


عسس د ]١|‏ عصس سم 8 |1 


هنا تستطيع ان تبارك لنفسك لأنك أنشأت أول موقع وصفحة على الإنترنت قم بالضغط مرتين على الصفحة التي أنشأتها وسيقوم المتصفح بفتحها 


كصفحة إنترنت. كما في الشكل التالي: 


017 11152) 1] 5 


2117 5516 735282321 
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يمكنك تغيير النص الظاهر على صفحة الويب من خلال الملف الذي أنشأته وتضع اسمك أو أي نص آخر بدلا عن 


5 )11:5 119 أدى طمهروة::دم 1:56 219. جرب ذلك واحفظ الملف بعد التعديل . 


علامات ترميز دع 12 .1111/11 


لغة ال1117/11 تعمل بواسطة علامات ترميز وتسمى ايضا ( و1285 .11:17/11) وتحوي هذه العلامات اوامر ال 11121 سواء امر لكتابة نص معين امر 
لإظهار صورة أمر لتعين حجم خط معين .. الخ. 


هناك نوعين من الترميزات لصفحة الويب ,75117311 (ترميزات الهيكل - ترميزات المحتويات ).ترميزات الهيكل لابد أن تكون موجودة في أي صفحة 
ويب وإلا الصفحة لن تعمل لأنها تخبر المتصفح بأن الملف هو صفحة ويب . مثل ( <2[1اط/><[دسصاط> وأيضا <5007/> <003> ). 


ترميزات المحتويات : وهذه الترميزات تعطي اوامر للسرفر أو المتصفح بعمل شيء معين إما نص او صورة او أي شيء آخر حسب برمجة المبرمج. 


صورة توضح هيكل صفحة الويب : 


<1ذاب>وحادفهطا د و5اطااه اكع 


تم .دارة:1301قم 3 15 5اأطاا دم 


حتما .دادرةو03قم عطعاموة 15 5اطا امه 





الشكل الرئيسي لهذه العلامات أو ال 1265 كالتالي: -١‏ بداية الامر "- نهاية الأمر وفي وسط علامة او أمر الترميز يكون المحتوى الذي سيتم تطبيق 
الأمر عليه. 


<135123111] >المحتوى <138121116 /> 

في الصورة السابقة هو شكل اوامر ال 111 ونعني ب 23212217 أي اسم الأمر أو الترميز المطلوب تنفيذه. 

<02112111)- هنا يبدأ الامر أو وظيفة علامة الترميز التي نريدها ويسمى (ع12 5121). 

المحتوى الفراغ الموجود في وسط المثال السابق هو المحتوى الذي سنطبق عليه امر الترميز سواء كان نصا أو صورة أو غيره. 


<609113111/-> هنا ينتهي أمر الترميز ويسمى ب (1498 20©) ويشبه الأول لكن هنا أضفنا علامة سلاش / والتي تميز علامة الترميز في البداية عن 
النهاية. 


في المثال السابق استخدمنا علامة ترميز <110:1- بدأنا في بداية الملف الذي انشأناه وكتبنا هذا الرمز ويشترط لأي ملف او صفحة ويب في لغة 


1ن يبدأ بهذا الرمز وينتهي ب <1:1221/> 
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ايضا رأينا رمز <70)017> وهذا رمز يشير إلى أحد أهم عناصر صفحة الويب ضمن هيكل ملف ال ,71113711 ويحتوي بداخله جميع محتويات الموقع او 
الصفحة : 


لدمعغه!! - مطمطع سىرة_برم 1 





ننتقل إلى ترميزات المحتوى للصفحة نأخذ أمثلة على ترميزات ال ,571173411 مثلا هذه الترميزات كلا منها يدل على امر معين : 
<> هنا النص <7/> 


حرف ال722, الموجود داخل الترميز إختصار ل 11 1231:2512 والتي تعني نص إذأ عندما نريد عمل نص داخل صفحة ويب نستخدم الترميز السابق يبدأ 


ب <> وينتهي ب <7/> 

مثلا من اليسار : <7/-هذا كتاب خاص بالمواقع الالكترونية <7> 

مثال آخر: <ع112/> <ع1118> 

ترمز كلمة ع«مة إلى ©1228 وتعني صورة لذلك يستخدم هذا الترميز لعمل الصورة داخل صفحة الويب. 
سنأتي إلى عناصر ترميز كثيرة في ال ,7117/11 في الدروس الأتية . 


ملاحظة هامة: لا فرق في كتابة علامات ترميز لغة ال ,1137/11 سواء بالحروف الإنجليزية الصغير او الكبيرة كلاهما لا فرق بينهما . 
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محرر الك .111111 (5 01601 .111111) 
نقصد بالمحرر هنا أي البرنامج الذي سوف نستخدمه لإنشاء صفحات الويب ولكتابة وبرمجة لغة ال ,11717311 والذي يساعدنا في برمجة صفحاتنا التي 
سنقوم بعملها وبرمجتها. 


في بداية تعلمنا لغة ال ,1117311 سنستخدم برنامج المفكرة أو ما تسمى ( 7046790 ) باللغة الانجليزية والموجودة في أي جهاز حاسوب ويمكن 
الوصول إليها عن طريق: - 


5 'عريع اا وما هه 


إبدا 00 البرامج - البرامج الملحقة 1 المفكرة أعكناملا عع أكصقم ]| عاط 1 9 


؟مغوانءاة) 

00 غمحمممظ مسمقصصمهع 
مع زمءطة عارمبمطع لا د مغ ععممم جهها 

كع نال81 مع زمه مم عع مممح 2 

1 أمع563 وملقاء 6 5 
أعمو8 غناصصآ طغدا! قح 
مممعغهلا 0 





ع أكناا/ا! 


63| ا ُ 500 سه 0 . . دده أو مندم‎ 0 ٠ ٠.6 
0 يمكننا من خلا المفكرة برمجه وإنشاء الملفات التى نريدها ويمكن الوصول للمفكرة كما فى الصورة يع‎ 
13 ا 3 1ه مده‎ 

١00 7 00‏ وواممام يه 
والشرح السابق ٠.‏ ص يبو 7 الي دوه ّ 


5اع2101 لنت كعءعانك0] ععغهلا رواء58 :129 
كع امع ) ع لالز5 © 

15 أناد]ء0] كع هاصع دنماه كص ةلالا 
تعغمعع بطناتطهانا دده لصآلالا لهذا 

غ1مممنا5 لمن ماعلا 0د مل الا قر 
ووعععيم 6م عووع فى 

امه ممعنويزد لال 

عم غعاطة؟ لال 

الع طكيع بوهم دبمرول صزلالا لل 


ع8 4 
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عناوين ال 1111/11 ( 11201285 .111111) 
سنتعلم في هذا الدرس كيفية إنشاء عناوين في صفحة الويب وهي انواع منها ما هو أكبر حجما ومنها ما هو أصغر بقليل ومنها ما هو أصغر أيضا. 


علامة ترميز العناوين في ال 10:1 بسيطة جدا ولها رمز محدد وهو <11/> <11> وحرف ال 1[ يرمز لكلمة 12630128 والتي تعني عنوان .اما 
الرقم ١‏ فيمكن تغييره إلى رقم " وهو حجم الخط. 


مثال: 
أكتب الكود أو البرمجة التالية في ملف ,1117/11 


كد قا رص سا ب كل للممعذهل! - امخططع سر غكة_برم 21 


ماعط بعالا +وصصمرمع تزغ علط 


<االاغخط> 
<لال0ط> 


حاط ر>عنرو» | معلياح1ط> ١‏ 
<2ط ر>عنرم» | علنا<2ط> ١‏ 


حقط ر>عنرم» | عليا<تط> 


> 1/0 
اسم ا 





بعد كتابة الكود والبرمجة السابقة ستظهر النتيجة التالية: 


١ 


371/1011 


١-1 


لاحظ النتيجة في الكود السابق وضعنا ثلاثة عناوين وجعلنا أرقامها مختلفة كما تلاحظ النتيجة النص الأكبر هو عنوان رقم واحد. والأصغر هو رقم ثلاثة. 


فقرات ال .111811 (كطاصرد:اع 2212 :111311) 
فقرات لغة ال ,11173411 . كيف نقوم بعمل فقرات أو نص داخل صفحة الويب ؟ هنا في لغة ال ,1117411 طريقة سهلة وكلما مررت على الدروس التالية 
ستجدها مكررة في طريقة عمل الترميزات والبرمجة مع تغيير فقط مسميات الترميزات . 


نقوم بإنشاء فقرات أو نصوص من خلال الوسم أو الترميز أو الكود <2/> <72> ويرمز حرف ال 2 إلى طامه7ع291:3 والتي تعني نص او فقرة 
.في المثال التالي سنقوم بعمل فقرة معينة داخل صفحة الويب وعنوان أيضا كما أخذناه في الدرس السابق وسنطبقهما معا ء قم بكتابة الكود التالي: 
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لدمعتهلا - امخططع سؤكرة يرم 1 
ماعء ‏ بعالا +وصمممغع لوغ علط 
<اشضغط> 
<لال0ط> 


حتط/ر> ع5"لامء 1111لا 0غ عترم ا عرز حختط> 
<م> 
5 ]| "لا0© 2520, ©5"الام 11111 0غ عترم | عير 


<م ر> 


> عسي اب« 
<111 1 > 





بعد كتابة وبرمجة الكود السابق وكتابة العبارات السابقة سترى النتيجة كتالي : 


0015 1111 1 0غ عدتدم»5»1 


5 نات 320 عدكتامء 111111 هخ عتدمعاء:17 


يمكن عمل عدة نصوص في أن واحد أيضا لتكون فقرات منفصلة عن بعضها وليس كتلة واحدة وذلك بتكرار ترميز الكود الخاص 
بالنصوص أو الفقرات. 


روابط ال .1111811 (وك[طانآ 1111811) 
لا يوجد صفحة على الإنترنت إلا وتجد كلمة أو زر عن الضغط عليه تنتقل بالضغط عليه إلى صفحة آخرى أو تجد جملة ك( اضغط هنا ) . وعند الضغط 
عليها تتوجه إلى مكان آخر أو صفحة أخرى هذه كلها تسمى روابط او 1.1715 . 


في هذا الدرس سنقوم بعمل رابط أو لينك يوجهنا إلى أي موقع آخر ونستخدم الترميزن <2<>/2> لعمل الرابط لنقم بكتابة الكود التالي وسنجرب 


في هذا المثال الكتابة باللغة العربية تابع: 





لاحظ الترميز والكود في الصورة قمنا بعمل رابط إلى موقع جوجل تمنا بكتابة 27> وهي ترميز الرابط لكن قبل إغلاق الرابط لدينا جملة مهمه وهي 


''"-11:©2[ هذه الجملة تحدد مكان الذهاب بعد الضغط على الرابط وهي ثابته لا تتغير ونضع ما بين علامتي التنصيص رابط أي موقع كما وضعنا موقع 
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جوجل في المثال يمكنك عمل أي موقع آخر .أو حتى يمكنك عمل ربط لصفحة أخرى داخل الموقع نفسه سنأتي لها لاحقا . قم بتجربة الملف وتشغيله 
وانظر الى النتيجة واضغط على الجملة طبعا ستظهر كما في الشكل التالي : (انظر الملاحظة اسفل قبل تشغيل الملف) 


ملاحظة : في الغالب لا تعمل اللغة العربية بشكل صحيح لذلك لابد من عمل الخطوة التالية كيف يقوم السرفر باعتماد اللغة العربية من خلال : 


اضغط على ملف - حفظ باسم - اسف النوع هنا خيارات اختار 1118 بدلا عن 47151 كما في الصورة التالية : 








7 -ّّ جيب سي جه 0-0 22-0 حِ 85 
حا ه 3-١‏ هه سه ص 2 كشع0ة5 |1 
راع انا/171 جاع روما مع الاح <١‏ خاص بالأمنلة > للك 5 ( 
© 32 اع امع بمعلذا » عدامةو01 
1111 11ل مص م03 1 عمقلا كع رميوع جد 
00 ع7 7:17 مار كرت /17؟ #ططع سر عور _لرم |[ | ممغاىء0 !1 
0005 1 
]| وععواط غمعععم إن ١‏ 
عا نانواد ح2” 
كعروعطنا 9 
كمع تاناء 00 6 
أكناأ/ا! الى 
5عناك 1م خا ا 
1/1 لك 
4 أ | كك 
3 اممخحاءطاع سر عدر ا؟_يزحم ‏ بعصمهم عاط 
|- (4ط.*) امع «اداء هنا غك ١‏ | عمط 5ه عضو5 
آذلاط __ 


د علمءزولا لاا بببْبْبْا _م_اااااستة 


موالمع 0 لمعملا 
ثم قم بالحفظ واذا ظهرت رسالة اضغط نعم . 
بعد ان عدلنا نظام التعرف على اللغة العربية نقوم بتشغيل الملف الذي قمنا بالعمل عليه سنجده ظهر بالشكل التالي: 


|11 .جاع //ا_خ5 ١‏ 1_/ا 11 /رداع /نا/ط١/كتاب2096ودور‏ 5 المواقع/خاص2096بالأمثلة/مه !دع 0 /أعدداه/ز/5ءول١/:///:511‏ (ق| | ا 


اضغط هنا للذهاب إلى. جو جل 





نلاحظ عند الضغط على الزر يفتح لنا في نفس الصفحة موقع جوجل ء لو أردنا ان يقوم المتصفح بفتح الموقع في صفحة أخرى هل هناك طريقة لعمل 
ذلك ؟ 

نعم .هناك خاصية نقوم بإضافتها إلى تاق أو كود أو ترميز اللينك وهي خاصية (60ع21)) ومعناها هدف . نقوم بإضافة الخاصية السابقة مثل خاصية 
الرابط ومعها علامتي تنصيص كما في المثال التالي : 


لمعمل - امخططع بس كمه يرم 2 
ماعط بعالا غوصرمع للع علط 
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لاحظ أضفنا خاصية " "'-6م266) وضعنا ما بين علامتي التنصيص القيمة >171811_ والتي تعني فتح صفحة فارغة. جرب المثال بنفسك واضغط 
على الرابط وانظر هل فتحت لك صفحة أخرى أم لا . كيف أقوم بعمل ربط لصفحة داخل موقعي نفسه او داخل مجلد موقعي ؟ مثلا أريد أن اضع زر أو 
رابط اسمه اتصل بنا فهل يمكننا ذلك ؟ نعم تستطيع عمل ذلك فقط قم بعمل التالي : 

انشئ صفحة ويب سمها بالاسم 0012434 . ضع فقرة أو نص معين حول الاتصال بك عنوانك وبريدك الالكتروني .ضعها بجانب الصفحة التي تطبق 
عليها. 


بعد عمل صفحة أخرى لجانب الصفحة التي نقوم بالتطبيق عليها نعود إلى صفحة التطبيق لنضيف رابط لفتح الصفحة الأخرى. نقوم بعمل الرابط 
كالتالى: 


6 


مممعتها! - امخططع س كه _برمم 2 


ماعط بعالا غوصرمع لغ علط 
<الغخط> 
<لاله0ط> 


<ة/> إضغط هنا <'" 15111 5لا 236 زوع '"-1ععصرط 3> 


سا0 
<1 11 > 





بعد عمل الرابط كما في الصورة قم بفتح الصفحة واضغط على الرابط على تم نقلك للصفحة الأخرى ؟ نعم سيتم نقلك للصفحة الأخرى التي أنشأتها. 


التعامل مع الصور ال .1111/11 (د5ع1111/11.11:28) 
المواقع الإلكترونية بدون صور لا تكون جميلة وجذابة بل إن أكثر المواقع جمال تتميز بوجود الصور والخلفيات الرائعة » هنا سنتعلم كيفية إضافة 


صورة لصفحة الويب . 


لإضافة صورة في لغة ال 11111 نستخدم ترميز معين وهو <116> كما في المثال التالي لدينا صورة اسمها نام سنقوم بإضافتها إلى صفحتنا 
التي نطبق فيها .قم بإدراج أي صورة في المجلد الذي تعمل 


١ 1 7‏ 5 0 سس سم 0 به 0 لممعتملة - امخططعسؤكرة_ يرم 1 
عليه وقم بتسميه الصو ره +أ)ازم[1نام ثم قم بكتابة الكود _ 0 0 

: <ا > 
التالي: <لال00ط> 


< "1113206 ع 231-311 0م 11م[آنام "دع 5 10> ا 


4 سمي /< 
<111 ا > 


لاحظ الكود المكتوب : 





<1116> وهذا ترميز خاص بالصور لاحظ أنه لا يوجد 


ترميز يقوم بإغلاق الكود كما كنا نعمل مسبقا. 


'" ''جم10ك هذه الخاصية تقوم بإخبار المتصفح او السرفر عن مكان الصورة واسمها ونقوم بكتابة اسم الصورة ما بين علامتي التخنصيص شاهد المثال 
.لاحظ اسم الصورة ع1211.[7نا7 


اضفنا نوع الصورة وهو عمؤْ. وهي مهمه جدا كون الصور أنواع فمنها 17ع. ومنها ع2م. وانواع أخرى ومن عملوا على برامج معالجة الصور 
يعرفون ذلك . 
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'" "-21[6 هذه الخاصية تقوم بوصف الصورة في حالة لم تظهر الصورة لأي مشكلة ما يظهر الوصف المكتوب ما بين علامتي التنصيص . 
قم بتجربة المثال السابق . هل تريد إضافة نص إلى الصورة او شرح مبسط ؟ 
استعن بما أخذناه مسبقا من علامات الترميز لتضيف وصف للصورة وليكن بعد الصورة انظر المثال التالي وسنتعلم منه خصائص جديدة : 


> 


صسوووروروو----08838383939393193191919551سمم مود 


ماعط بعالا +غوصممع غرزلع علط 





< "200"-غطواعط "400"-8غل 1ه "12306 ع 1-11 23 لم[ 11مانام "دع 5 10> 


<م/ر> .. هذه صورة رأئعة وهي جبال تقع في هولئدا 


خصائص جديدة أضفناها لنتعرف عليها معا : 
'" '-11 1710 هذه خاصية مقاس العرضص للصورة ونصع الرقم الذي نريده وسط علامتي التنصيص. 
'' ''-1101210 هذه خاصية مقاس الطول للصورة ونضع الرقم الذي نريده وسط علامتي التنصيص. 


ايضا هنا ترميز جديد أعتقد أنه هو ما كنت تبحث عنه وستحتاجه وهو <1(1> وهو ترميز يستخدم للنزول سطر واحد بعد اي ترميز لاحظ ماذا كانت 
النتيجة : 





3 85 د 15 !1 
هذه صورة زرالعهة وشي جدال لفع في شوللذا 
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رأس ال :111811 (لدعط :811311) 


يعتبر رأس الصفحة المبرمجة من أهم الأجزاء للموقع ففيها يتم وضع عنوان الصفحة أو اسم الموقع أو تفاصيل الصفحة التي زرتها قد يكون خبر أو 
البوم صور أو غيرها. وأيضا يحوي وصف للموقع والصفحة التي تمت زيارتها. 


أيضا في رأس صفحة ال 1011 يمكن وضع أشياء أخرى هامة سنتعلمها في الدروس القادمة مثل : 


خصائص الاستايل الخاصة بالموقع (©5091 2595©) أو رابط لملف 055 أو 56141171 147574 سنتعلم كل ذلك لاحقا سنجرب الان بعض محتوى رأي 
الصفحة لاحظ الكود التالي : 


لدمعغها! - مام.طعسؤورة_برم 21 
ماعط بعالا غوصرمع للع علط 


<الغط> 
<20عط> 


<73+16غ+/ر> هنا عنوان الموقع او الصفحة <©1 38> 


<''هنا وصف الموقع أو الصفحة''-11 01216 1701م الى وعل ''-153116 13ع11> 


<0دعط/> 


<لاله0ط> 





لاحظ في المثال السابق وضعنا كود الرأس <11»20> وأغلقناه 2 الاسفل <20ع:1[/> هذا رأس الموقع. ننتقل لمحتواه وضعنا عنوان للموقع والذي 
ويرمز له بالكود أو الوسم <1616)> وأغلقناه بال <1616)/> ووضعنا في داخله عنوان معين سواء كان اسم الموقع أو عنوان الصفحة المراد تصفحها . 


ايضا أضفنا كود ال <210)0,> وهذا الكود من اهم مكونات المواقع فهي مهمة للمتصفح ومحركات البحث مثل جوجل وغيره وعلى حسب نوعها هنا في 
المثال تم وضع ال 171642 لوصف محتوى الموقع وهو مهم لمحركات البحث تحتفظ او أرشفة الوصف لديها لحين البحث عن نفس الكلمات المدرجة في 
الوصف للموقع. جرب وشغل الصفحة كالمثال السابق ماذا تلاحظ في علامة تبويب المتصفح ؟ هل ظهر العنوان ام لا ؟ 
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سيق نص ال 111111 (101"12216618 '1111) 
1 0 تنسيق النصوص داخل صفحات الويب مثل تفخيم النص او النص المائل أو النص العادي. ومن خلال المثال التالي سيتبين لك بعض 
خصائص تنسيق النصوص. 


وسم او كود <17> وهو اختصار لكلمة 7010 أي تفخيم النص . 
وسم أو كود <1> وهو اختصار لكلمة ع148[11 أي نص مائل. 


مثال: 


لدمعغمل! - امخططعسؤكرة_برم 1 
ماعط بعالا غوصرمع غزلعغ علط 


<0 /ر>موقع رواد التكتولوجيا< 8 > 
< 71 />موقع رواد التكتولوجيا< 73> 


سمي ار 
< 1ط > 





في الكود السابق أضفنا كود <17> وكتبنا نص معين وثم أغلقنا الكود في حالة لم يتم إعلاق الكود ستكون كل نصوص الصفحة مفخمة. كما قمنا بإضافة 
كود او وسم <1> كما في الكود السابق وهي للنص المائل . قم بكتابة الكود السابق وستلاحظ النتيجة التالية كما الصورة : 





* | كنا عنئوان الموقج او الصشحة [ | 


عن 2096 با لأمثلة ,ده »!5ع 0 رأع دناه ر"ر5اع 5 لان انها  ]8‏ ع ى 
موقع رواد التكنولوجيا موقع رءاد التكلولوجيا 


لاحظ النص العريض والنص المائل يمكنك وضع كل جملة في سطر ضع كود السطر كما تعلمناه مسبقا. تمارين حول خصائص النص قم بتطبيق الأكواد 
التالية في الجدول التالي ولاحظ ماهي وظيفة كل كود او وسم : 
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83/١0 | 5‏ تلوط ألاء | 1ل | م 


ملام رعجعن] 

اماعط امنا 5ع ررراعنا 

امعط لع جاه ترا ددع دعمورقعن] 

عصصنر تنه ععزمم/ا عغأدتدعطاق درت حا عجدعغ أه غأردم 3 دعررراعن] 
اماعط رع |أدلرة دعررراعنا 

امع ات ]مرتما دع ررراعن] 

امعط معام تدعو لاد 125 زأعن] 

أمدعع معام اتع5اع ولاك 5ع لاعن 

اماعط لمعطرع 5ررا 5ع لاعن 

اماع لعأداعل دع لاعن 


امع لععغلان ! اطاواط/لعع !ردم دعرراعنا 


خصائص الخطوط فى ال .1111/11 106 :111311) 


<< |أذتره »> 


ع وتام ات 





< نالاك>» 
< طناك 
جداعل0 > 


تع 13> 


ونضع خط مميز عن الخطوط التي أنشأناها مسبقا. وسنستخدم هنا الكود أو الوسم <1016<>/1020> 


لاحظ المثال التالي: 


<©3138+1+/> هنا عنوان الموقع او الصفحة <© [/ 71> 


<'"هنا وصف الموقع أو الصفحة '' - 60+ م0 "02 31م 51 عل '"'-22116 62> 





بعد ملاحظتك للكود السابق والجديد سترى كود كبير لكنه بسيط جدا وسنسرد هنا كل شي في الكود الجديد وسنبدأ من البداية: 


أضفنا كود <40116>.وهنا إشارة للمتصفح او السرفر بأن لدينا هنا خط له خصائص. 


بعد أن أضفنا كود الخط نقوم بإضافة الخصائص للخط وبدأنا بعمل خاصية ال ©4296 وتعني نوع الخط ووضعنا ما بين الحاصرتين اسم الخط الذي نريده 


وهو الخط الشهير :12011281 721617 111165.والموجود طبعا في برنامج الورد والاكسل وغيره. 
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ملاحظة : (ليس كل الخطوط موجودة في السرفر لذلك يستخدم بعض الخطوط الموجودة في المتصفحات او السرفرات المعروفة او إضافة خط مميز 
للموقع). 


أضفنا خاصية 00101 وتعني اللون ووضعنا ما بين الحاصرتين اسم اللون وهو 10 ويعني أحمر يمكنك عمل لون باسمه غير الاحمر مثل 8112 
جرب ذلك كما انه يوجد اكواد خاصة بالألوان بدلا عن الأسماء مثل #002 ضع هذا الرمز بدلا من الاسم ولاحظ.(سنتعلمها لاحقا). 


أضفنا خاصية «,عذاج وتعني مكان الخط هل على اليمين او اليسار او الوسط هنا اخترنا ©0621 وتعني توسيط الخط جرب كلمة 110 وكلمة 11511. 
أضفنا خاصية :0 وتعني 16010 وهو اتجاه النص وهنا خاصية مهمه جدا سترافقك كثيرا في عالم المواقع وكما تعلم أن اللغة العربية اتجاهها من 
اليمين إلى ايسار في المثال طبقنا هذه الخاصية وهي 11 وتعني 116 10 7114 من اليمين إلى اليسار وهناك الخاصية الأخرى الخاصة باللغة الإنجليزية 
أي من اليسار لليمين عكس الأولى. 


أغلقنا بادئة الكود التابعة للخط ثم وضعنا النص وأغلقنا النهاية للخط ب <60136/>.جرب المثال السابق ولاحظ النتيجة: 


رواد التكنولوجيا 
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الجداول فى ال .1111/11 (5ع121 .111/11]) 


تعتبر الجداول من اهم محتويات لغة ال ,7117411 وتستخدم بكثرة في المواقع والنشرات الالكترونية رغم وجود بديل جديد لكن مازال من يستخدمها 


إلى الان. ويرمز له بالكود <2716)> 


الجدول او ال ©1211 ,72117311 وظيفته الرائعة التي يقوم بها هي ترتيب محتوى الموقع سواء العناوين والنصوص والصور وغيرها ترتيب دقيق جدا 


ويتكون الجدول من التالي: ( أعمده - صفوف - خلايا ). 


والهيكل العام للجدول كالتالي: 


الصق الاول الخلية رقم 2||الصف الأول الخليه رقم 1 


الصق: الثات خليه رقم 1 


دك 





والكود المستخدم كالتالي: 





لدمعتها! - امخططع سي كمه يرم | 


ماعط بعالا غقصممع غزلغع علط 


<'' 1 ''حترع لتزم7[ 31> 
جع 
<0)/>الصف الاول الخلية رقم ؟١<60>‏ <0)/>الصف الأول الخليه رقم >)0<١‏ 


اك 
وك 
<0)/>الصف الثاني الخلية رقم ؟١<60>‏ <0)/>الصف الثاني خليه رقم >)0<١‏ 


ح :)>> 
<ع9211/> 


شرح الكود: في البداية قمنا بعمل جدول بإضافة كود <42116> لاحظ وضعنا خاصية للجدول وهي إظهار حواف الجدول 1701:0161 بمقدار ١‏ بكسل جرب 
وضعها صفر لاحقا وقارن. تم إضافة صف <0)> ثم تم إضافة خليه داخل الصف بالكود <01)> هنا يحق لنا وضع المحتوى الذي نريد ثم نغلق الخلية 
يمكننا عمل خلايا كثيرة كالسابق ثم في الاخير نغلق الصف الاول بالكود <61/>» الصف الثاني بنفس طريقة الاول في الاخير نقوم بإغلاق الجدول 


<816)/> بعد الاستكفاء بالصفوف. لاحظ الخلايا التي الصف الأول حين تنطبق مع الخلايا مع الصف الثاني نصفها بالعمود. 
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القوائم فى ال .1111/1 (ئاذأ.آ .1113/11). 


معناها بالعربية قائمة او لائحة وتستخدم لعدة اشياء والاهم للعناصر المسرودة ضمن فنئات مثلا: خضروات (جزر- خس - طماطم ) 
فواكه ( تفاح - برتقال - عنب ).يمكن التعبير عنها من خلال القوائم في ال[1:)01 بواسطة القوائم (115)5). 

لدينا نوعين من القوائم وهي: 

النوع الأول : القائمة الغير مرتبة ( 1.156 1120116160 ) وتكتب في لغة ال1[1)ط بهذه 


الطريقة كما فى الصورة المقابلة : 
لطريقة كما في الصورة المقاد فدوعاما١‏ - 4عثانا0لا ١‏ 


ماعط بعالا +وصصمممع لغ علط 


لاحظ استخدمنا كود <11> وهي ترمز للقائمة الغير مرتبة او غير مرقمة فتحناها بعد اسم ||* << 2( () 002020 خضروات 


<-[نه 

خضروات ونكتب بعدها كود العناصر وكل عنصر يفتح ويغلق بالكود الخاص به وهو <زا/>جزر <> 

<11[/>خس-<< 11> 

<11> مثل عنصر <11[>جزر</1[>. اه 
1 





جرب عمل كود القوائم وانظر الى نتيجته في موقعك. 


النوع الثاني : القائمة المرتبة ( 1,156 01706160 ) وتكتب في لغة ال1[)11 بنفس طريقة القائمة الغير مرتبه مع اختلاف بسيط في الكود.كما في 


الصورة المقابلة أيضا: 
ما الفرق بين الكود الاول والثاني للقوائم ؟ جرب الكودين وانظر ايهما المرتب والغير ظ معام - لال 7 
ماعط بعالا +وصممع لغ علط 
مرتب. 1 خضروات 
<[ن0 > 
8 ر 5 1 <ز][/>جزر <> 
سنستخدم القوائم فيما بعد في لغة ال 121 مع ال 2959© باحترافية وصنع قائمة رئيسية <ز1/>خس-<> 
ب <1/>طماطم-[> 
للمواقع بشكل أنيق واكثر فائدة. <ا0/> 
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تطبيق عام حول ال .111311 
( 121151125 161101 101 2211162641011 121ع22»2) ) 


سنقوم بتطبيق تطبيق عام حول ما أخذناه في لغة ال.1113711 ومن خلال هذه التطبيق سننشأ موقع مصغر بواسطة هذه اللغة الرائعة ونضيف بعض 
الأوامر البسيطة والمفيدة وسيكون التطبيق كما في الشكل التالي: 


صورة لرأس الموقع العرض )٠٠١(‏ والطول ٠٠١(‏ بكسل) 


الرئيسية 0 أعمالنا من نحن صور “تتصل بنا 
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« ِ افك الف لبية 
بالنظر للشكل السابق والمطلوب سنقوم بعمل جدول يحوي الموقع كاملا ويضبط لنا محتوياته » ويحتوي الجدول على 7 صفوف الصف الأول لديه خليه 
واحدة فقط والصف الثاني كذلك كما تلاحظون في الشكل وآخر صف كذلك. 


الصفوف الباقية مكونة من خليتين او عودين الاول على الايمن للصور والثاني على الأيسر للنص. في الصف الاول في الخلية الوحيدة سنصمم صورة 
ونضعها في الخلية في رأس الجدول بنفس المقاسات المطلوبة وننوه على أن شكل الموقع العام يعتمد على فن التصميم وجماله وليس حرفية الأكواد 
والبرمجة فقط. 


في الصف الثاني من الجدول نقوم بعمل عناصر القائمة كروابط عند الضغط عليها يتم الذهاب لصفحة أخرى وهي (الرئيسية - أعمالنا - حول الموقع .. 
إلخ ).طبعا الصفحات حاليا غير موجودة ولكن بعد الانتهاء من الصفحة الرئيسية إلى آخرها نقوم بتسمية الصفحات الأخرى في الروابط مثلا: عنصر 
القائمة أعمالنا سنضع صفحة اسمها [ددراط.5ع01:1؟0111_7 في رابط الزر أعمالنا. 


بعد الانتهاء من تسمية الروابط والصفحات الأخرى نواصل إدخال المحتويات ففي الصف الثالث في الخلية اليمنى نضع صورة حسب المقاس المطلوب 
وهو إما أن الصورة نفسها تكون بنفس المقاس او نضع صورة بأي مقاس ونضبط مقاسها في الكود الخاص بالصورة وانا افضل الأول حتى لا تثقل 
الصفحة بأحجام الصور. 

في الخلية اليسرى نقوم بعمل نص ونضع الاعدادات الخاصة بالنص حسب رؤيتنا. نطبق الخطوتين السابقتين على بقية الصفوف. الخطوة الأخيرة 
الصف الأخير نضع فيه نص عادي بالحقوق والملكية للموقع ايضا رابط للشخص او الشركة المصممة للموقع. 
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نبدأ بالتطبيق وعمل الكود اللازم: 


نقوم بفتح برنامج الفوتوشوب بداية كما في الصورة ونعمل ملف جديد بالمقاسات العرض )3٠٠١(‏ والطول ٠٠١(‏ بكسل) كما في الصورة التالية: 


فتيلل فلت -0( تال)!| تح امعينا لاد تللق 
5ع قا الث دنه نوقاوم 57 كداد-قامم 5 
لسرن كينا 1 نت 7ت اليك 


حتيكيك 
+ الللللا 
0 


إن ال م] 
سس اععمته :... ) 10و0طم0 :هومم 
| | ...غموع,م مهاعم واععزم : 0 ذلالا 
واعع»زم :أواع لم 
اعم[ إواععزم :0 نااموع8 
غط 8 + ,مام 68م :1008لا دام 


: ععاطلانا :تطأمع0006 0ونامروعءو8 
:2 177806 


51.216 800 اعم 


061966-1ط1 68د :68 ولناروننا :ع1أقمعه ,وام 


واععام ععونو5 :8860 عععمعثم اععزم | 





نقوم بعمل اللازم في الصورة التي ستكون رأسية الموقع وهنا ملاحظات او تنبيهات عندما قمنا بعمل هذه الصورة كرأس للموقع ماهي الا فكرة من أفكار 
كثيرة فمثلا هناك مصممين للموقع يفضلون عمل خلفية لرأس الموقع صورة واحدة والشعار مع الاسم صورة الأخرى وهو الأفضل ايضا . 


بالإمكان عمل الخلفية كز معين كلك الكتهي لجد كل امك االمرطع افضيق السيالة ليخفف إحجم  [01911/‏ #لا يشترط بأن يصمم الصورة لرأس 
الموقع مصمم الموقع نفسه أو المبرمج يفضل أن يصممها شخص له حس فني وتصميم مميز .فإن توفرت هذه الصفة في مبرمج الموقع سيكون أفضل 
وأوفر للوقت. 


بعد فتح برنامج الفوتوشوب سأقوم بعمل ترويسة للموقع بسيطة كمثال للتطبيق والناتج كما في الصورة التالية: 
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تت 


كه+ل 51136 


لحت ا 
انوي ام العم ا 60 اهم 
ع اهف - أقصمعهل؟ 
للها م هه جاعم ا 

اضر 
لاحن ا 2 
2 هها 
0 
كعكةانا00 ا1مآك5ع كع 1 1آكقعنالا 
ال --7 1 يكا 
1 كعنإقا 


كانت رجهاء83 


| © | 0م 





لما »نيلا حلمم 25 علس تفحاته حءرزم فتائ!| حاءطيناا بلاعة| ‏ حللها 
ل يي سركت - لمكت تاعداع5-ماريق > .+ 


>< (615/8؟] ,آنا 1/1) 10096 © لدم +اء داقعنا 


اليا 


ة نك 
0 


ذاراال/ا 


دورة تصميم المواقع 


00 ا دنطانا دن1 1لدظطتلا 


اشح يا "| ا عا 


1 


لياف 1 1009 


ا )2 


و8210 توداية؟ 


نقوم بإنشاء مجلد خاص بالتطبيق الخاص بال ,111711 ونسميه ,1117311 ثم نقوم بعمل مجلد آخر ليحوي الصور التي سنستخدمها للتطبيق نسمي 


المجلد باي اسم مثلا و1125 كما في الصورة: 


1 ١ كتاب ودورة المواقع‎ ٠ خاص بالأعتلة‎ ١ 1101لا‎ ٠ 





عع مغ بيعلا انا ولاك عل 1اأ5 * تاغانلا عفاد * بموعطنا صاعوساعم]آ > ع3012ق21 


كع رويروع لو 
ممغادء 0 !1 
00/05 1 
كعء وام غمععع8 1 


ع[ انانوا5 ”2 





1005 


كعمووطنا 2 
دممف نكا 
كأمع درناء ه00 23 أ 


ع أكناا/اا الى 


كعىنق 21 إضظآ 
محف :1 الله 


قمنا إلى الان بعمل الصورة الخاصة برأس الموقع نقوم الآن بإنشاء صفحة الموقع والتي سنسميها [1206:<.1612 ونبدأ بعمل الكود كالتالي: 


الجزء الأول من الكود: 


<"050 . 112301131 31215 3121311-11 / 10110 / 151011 2عة / 18 / 012 . 113 مالم /, / : عط" "511 / / 132515310231 0 . 1 -آ3<111 111 / /113/ / -" 218110 لشسعط 200128 ! 


<" 22101 / 1999 ريوع 0 . 173 . 11م كر / : طح 6  23031215-"5‏ لتتطط> 

>26520< 

</ "2-8 ج تع 25 قط : اط رععومج "عت ررم جع روه "7567 25-1ت دهن "77-2 1 ناوه لجطعط ع2 قعع2ت> 
<21216/> 12طظ18-ظ5 | موقع دورة المواقع الإنلكتروتية<618516> 

<0دع<ط > 


<" 1187" # حجن زمعوط تتقمط> 
<"1ع22"-ع 03 "02-74151566007 1موجج2عم01ع02ط "7 1 "تمدع عوط "عدم 6 رمج "2-7و 3113 "8007">-ع 17710 ع1طوع> 


رحد 4 4 
<20> 
</, "30 . عدع 22320 / 137215 " جتح2 5 21710 > 
<20 /> 
1ع > 


<122<>0> 
<ط/> <ة/><2026 /> الرئيسية<"47589900"-102مه 6زم ><" "د72 معط 35> <ط> 
: مقططغة : مرعطنة ‏ : مرعطدة : مرعطنائة 


<ط/ »> <ة لرعدع ضوع ر><" 479900 "عرزن زوج 25> أعمائنتنا41779900"5 "عجرن1وج عووع ع5" "2 ومرط وه دطه 
: مقطتغة : ورعطنة : مرعطدة : مرعطتاة 


<ط/> <ة/><2025 />من تحن<"4#7159900"-2 10م 65و5ه2 ><" "قط 53> <2ط> 
: قطنا : مرعطناة : مرعطنة : مرعطتاة 


</> <ة/><2025 />صور<"2-7"475159900 10م 2059065 ><" "7ج2ع22 83> <2ط> 
: قطنا : مرعطناة : مرعطنة : مرعطنا»ة 
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لخ رخن إذى 45 رف (زى |"- 


فم فم 


هم 
زرف 1 2 يم رخن 4 كن 


فم فم 


زكر آكن آخن كن ركنن أكن كن كن كن ا ”' 
رآخز 421 3-7 رق إزع ١‏ 


ل للا رست 


الجزء الثاني من الكود: 


<ط/> <2025<>/3 />حول المؤسسة<"425859900"-2ن1مج 2055 ><" "2-7 عط > <ط> 
: مقططة : معط : وروطداة : مروطحاة 


<ط/> <202<>/3 /> اتصل يتا<"#759900"ع-2 1م جضموع ><" "دقع 35> <2ط> 


<0ح /ر ومح / > 
<عرح > 


1 


<ع1طقح > 

>22< 

>20< 

</ "130">-5 شن دع "2-250 1710 "من . 37 /رواع 52" ج52 17210 > 
<50 ر> 


<20> 
جزيرة سقطرى - اليمن 
</ عط> 
سقطرى وتكتب أيضا سقطراء أو سقطرة أو سوقطرةء هي 
أرخييل يمتني مكون من أريع جرّر على المحيط الهتدي قيالة 
سواحل القرن الأقريقي 350كم جتوب شبه الجزيرة 
العريية[1]. إن اتعزال الجزيرة الطويل عن أقريقيا وشيه الجزيرة العريية قد خلّف مستوى قريد 
[وغير مأنوق من الاستيطان الحيوىي على الحزيرةء وكذلك قي الهستوى الاجتمهاعي لسكان الحزيرة[2 


<< /> 
حتتوح ارج 


>122< 
>520< 


الجزء الثالث من الكود: 


د/ىر ”2-130 نوعط "250 "عع 1 "ون نز . 211 “دمع م”ععع2 5 1110 > 
لعا »> 


<20> 
السكان 
دم عطدطة» 
يلغ عدد صكان حرّيرة سقطرى وققأ لتتائج 
التعدات السكاتي لعام 1994م حوالي 
تسسعة ويلغ 135020 عام 51[.2004]. وكاتت جرّيرة (55.514) 
سقطرى عاصعة للسلطتة المهرية إلى عام 1967 حيثت سقطت ييد اقراد من الحيهة القومية القادمة 
هن اليعن واتضمعت إلى اليعن الجتويي 
ثم إلى اليمن الموحدء الحيتات 
التي تم انجذها من جزيرة سقطرى هي جيتات 
عربييه تقيه لم تتأثر يأي عوامل خارجيه والسقطريون هم من قيائل صائده اي ان الحجيتات هي حِيقات عربية تقيه سائده 
وليست قرع .وهدةا ان دل على شي قأتةه يدل على 
اتهم حاقظوا على تسيهم العريي التقي.قييلة 
السمهرة وقبيلة جهيتة وقييلة الحهضهي 
.وقبائل الساده وقييلة مذدحح وقبيلة كتدة وقبائل العهالك اليعتية القديهة وعلى رأسهم قبيلة حجميّر هم سكان سقطرى الأوائل 


1ع رجه 
وج ارج 
له وه 4 
لعا 0 
صوارهة 


1ح “رجه 


>03< 


الجزء الرابع من الكود: 
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ذف م 4 0م 
لع خرن 20 ث للف رف “5 


1ف 05 000 


0 0 ل ا ل 
زد[ "ل 


0 
1 
2 


8 الاش 


7 كر 20 


لزغ رض 0 


آرت إزض أزت وت رت وس الا ال لد د د كد 
0 ذل ره هك :85 1١‏ 2 ا خم 7 357 وف 


لل 


حَ 


1- 
م 


ل 


1 
8 سد 


ارس فى دس 


اشم 2 457 إورض 


قا 


لمساتامسا سسا رمسا مسا سسا تعس 
- 


زه "1 


>12 


” 1 


1 359 
> مي 
1 


تنا شا ها شا ها 


1ع رجه 
12 رجه 


علط ا إل 
03> 


صوارة 
1 ره 


1 


بس 
11 
0 

وحم 

ابد 

5 

5 
1 


9 


ام > 


1ع رجه 
>1 رجه 


مح وم اه 
وحوح ر سنن ا رجه 
دع 1اطد ع رع 


> 120 

1122 ره 

نوعدج “رج “>3 201 15ظن لعتيتصمه عطل< "عدمن ورمع 5113-7 22> 
ع اطوع ار > 


«يتقصط ره 


111501 ره 





بعد كتابة الكود السابق سيكون الموقع بالشكل التالي: 


ذاناعلا 


اليمن 

سقطرى وتكتب أيضا سقطراء أو سقطرة أو سوقطرة: هي أرخبيل يمني مكون من أربع جزر على المحيط 
الهندي قبالة سواحل القرن الأفريقي 350كم جتوب تبه الجزيرة العربية[1]. إن انعزال الجزيرة الطويل عن 
أفريقيا وتبه الجزيرة العربية قذ خلف مستوى فريد وغير مألوف من الاستيطان الحيوي على الجزيرةء وكذلك في 
الستوى الاجتماعي لكان الجزيرة[2]. ظ 
السكان 
بلغ عدد سكان جزيرة سقطرى وفقاً لنتائج التعداد السكاني لعام 1994م حوالي (65.514) نسمة ويلع 135020 
عام 5[.2004]. وكانت جزيرة سقطرى عاصمة للسلطنة المهريه إلى عام 1967 حيت سقطت بيد افراد من 
الجبهه القوميه القادمه من اليمن وانضمت إلى اليمن الجنوبي تم إلى اليمن الموحدء الجينات التي ثم آخذها من 
جزيرة سقطرى هي جينات عربيه نقيه لم تتأئر بي عوامل خارجيه والسقطريون هم من قبائل سائده اي آن 

جينات هي جينات عربية نقيه سائده وليست فرع .وهذا ان دل على شي فأنه يدل على انهم حافظوا على تسبهم 
العربي النقي.قبيلة المهره وقبيلة جهينه وقبيلة الجهضمي وقبائل الساذه وقبيلة مذحج وقبيلة كندة وقبائل الممالك 
اليمنيه القديمه وعلى رأسهم قبيلة جميّر هم سكان سقطرى الأوائل. 





1111 م 
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شرح كود التطبيق (.811311) 
في السطر 4-١‏ : يتم كتابتها تلقائيا عند استخدام برنامج الدريم ويفر الذي ستستخدمه فيما بعد لعمل صفحات الويب لكن هنا عليك كتابة كل سطر يدويا 
وبالطريقة التي تعلمناها. 


قيمة <1()00:1352115> توضع دائما اعلى الصفحة أي في منطقة الرأس وهي تخبر المتصفح عن نوعية الاكواد المستخدمة في الصفحة سواء 
111311 ,111311 أو خليط بينهما حتى يتم التعامل معها بشكل صيح وسليم لكي يظهر للمستخدم بشكل منسق وفي السطر الثاني سطر لنوع اللغة 
المستخدمة والداعم لها وهي شركة 5 مم بعد ذلك فتحنا منطقة ال 722020 . 


السطر الرابع مهم للغة العربية او لغة الترميز التي يتم إعلام المتصفح بأن يعتمدها في عرض الموقع لأي شخص ويتقبل اللغة العربية. وتكتب داخل 
نطقة ال 1820 .في السطر 6-5 العنوان الخاص بالموقع داخل الكود المخصص . ثم إغلاق ال 2620 . 


5-7 في السطر الثامن قمنا بفتح محتوى الموقع او جسم الموقع <10059> »واضفنا داخله كود لون الخلفية وحدد كود اللون 
''111137"-010ع28 . في السطر التاسع قمنا بعمل جدول وبدأنا بعمله بالكود <81716)> ثم اعطينا هذا الجدول خصائص وهي : 


"110-800 خاصية العرض تم تعيين عرض الموقع ٠٠١‏ بكسل 
'"662©1"' -21183 خاصية اتجاه الموقع او مكانه وحددنا المنتصف -١رع10©©‏ 
0111-1[ خاصية مقدار سمك حواف الجدول وحددنا ١‏ بكسل جرب ارقام ولاحظ. 


'' 4116600" -:1201:0161:20101 خاصية لون سمك الحواف وحدد لون معين . 


"01-1 خاصية بدء المحتويات من اليمين لليسار او من اليسار لليمين هنا حددنا من اليمين الى اليسار 01:. من السطر ١5-١١‏ هنا قمنا بعمل 
الصف الاول في الجدول والذين حددناه سابقا بأنه سيكون خاص بترويسة الموقع قمنا بفتح صف وهو الصف الاول في الجدول <0)> ثم الخلية الوحيدة 
في الصف <0)> ثم وضعنا كود الصورة الترويسة الخاصة بالموقع وحددنا اسم الصورة ومكانها داخل مجلد اسمه وعجمؤ كما في الكود < م111 
'' 2021.8 ط/ووددةذ"' -عو>.ثم أغلقنا الخلية ثم الصف <0)/> <)/>. 


من السطر ١7‏ الى السطر 6" قمنا بفتح الصف ثم الخلية واضفنا كود <7> الخاص بتفخيم الخط ثم أضفنا كود عمل الرابط او الزر كما تعلمناه مسبقا 
قمنا بعمل <"'-11:8 ج > وهي بداية كود اللينك او الرابط او زر في القائمة الرئيسية لن اشرح كل حرف لأنه مشروح مسبقا فقط ما بين علامتي 
التننصيص وهي وجهة الرابط تركناه فارغا الى ان ننتهي من الصفحة كاملة وننسخ عدة صفحات نسخ عادي ونضع محتوى حسب ما نريد ثم نأخذ اسم 
الصفحة المراد الانتقال اليه عند ضغط الرابط ونضع اسمها مع الامتداد التابع لها مثل : <''1[1دغاط.1201:2" -1©47 > .بعد ان انهينا عمل بداية 
الرابط عملنا كود الخط واضفناه لعمل لون لاسم الزر او الرابط وحددنا رمز اللون كما ترون ثم أغلقنا الخط وبعده اغلقنا الرابط ثم أغلقنا كود تفخيم 
النص .اضفنا كود او تاق (8157؛) لعمل فراغات بين الرابط والذي يليه وهكذا مع بقية الروابط الى نهاية الخلية ونغلقهاء ثم نغلق الصف. 


من السطر 7” الى ١١‏ بعد أن انهينا عمل الصف الذي يحوي الترويسة ثم قائمة الأزرار ننتقل لمرحلة عمل المحتوى للصفحة قمنا هنا بعمل صف 
جديد ثم فتحنا خليه وهي الأخيرة في جدول الموقع وداخل الخلية هذه سيتم وضع جدول داخل الجدول الرئيسي للموقع لماذا؟ جاءت هذه الفكرة من باب 
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التنظيم وضبط محتوى الموقع والتسهيل وحتى لا يتأثر الجدول الرئيسي بالمحتوى. قمنا بعمل جدول وكما تعلمنا فتحنا جدول وعملنا صف وفتحنا الصف 
ثم عملنا خليتين الأولى للصورة والثانية للنص. أي لدينا جدول عمودين والصفوف مفتوح لمن اراد يزيد. نغلق الجدول ثم نغلق الخلية ثم الصف ثم 
الجدول الرئيسي. بعدها ننهي محتوى صفحة ال[01غط وهي ال <70037/> ثم » <[تمغطل>. 
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أ ©5171 25201115 ) '101 5121105 255) 


لغة تحدد شكل وثيقة 
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الباب الثالث 55) 


برنامج الدريم ويفْر (056 "دع اددع 21 800 ) 


6 2) قارع رتقع /الاللقع(] جاع املق 
ا 701 300 بكأموع0مم ,كملا أقع أوا 11 00لا 


.0 عو810 هعمولمف 


أحد البرامج المهمة والمستخدم في عمل صفحات المواقع الالكترونية سواء صفحات ال7111 وعمل الأكواد الخاصة ب,1117/11 وايضا الأكواد الخاصة 
بملفات ال055) وغيرها. ويمكن تحميل البرنامج من موقعه الرسمي او أخذ اسطوانة فيها برامج ال 2056© 40016 او ما فوق من أي مركز تجاري في 


مجال الحاسوب أو من أي موقع آخر وتحميله على الجهاز ثم التركيب. 
صورة عامة للبرنامج 


كم 


(5م0عل10/ا) 5ع ناهعط م10 


لاع اماع 01 عررئوعء رلاعا! 056 
أناملزقا م6 اناا 


019 ناك )5/زاة]أة) جقع 8510 : 


اعمقط قومناز05ة ١‏ 055 


دع معتة 5 عاأطما! بمعنيهز ١|‏ زوز ١‏ ...ألام لاق | 6618 لأبراع 








اعموهم لاأن8 موععمووم : 2 ١‏ 


, 
...ع:1105 6 


6 2) قرع باقع /الالررقع0] #عرامل0مق 
0آ 1701 300 ,كأقوء0مم ,كملا أكم وا 11 لما 


.10 عو80 هعمملم 


من خلال الصورة أعلاه وبحسب الترقيم : 


- +88 ماءنا سمدلملاط ع5 كلمتصمصممع +تصممع يدانا +عدمآ1 مصآلا +تدع عاع لالإ0] 


يق 
9 
0-1 
5 
- 
0 
5 


1 

ممنىن 0010 
مبرم 

65 

م51 ةمقل 
ااا 


...5116 أعناقع بالالروع نا 


: ...5116 أقلزالقاق0 قوقع م85 


2 
9 
0 


الي لاير لاير لاير لاير لاو اوم ه5 ه5 6 


لع غ| أمععع8 جه معم0) 
.1005/1001 , 
امعغط .امم /قامم؟ ', 
عع .ع أقامماع لقع , 
قمع .لمم ]ناأمهع_معاالا , 
لأا 018معاءأنان..._68.700)-مع/068-مع 2 , 


لأأء 0135ماع انان..._8.700ت-رع/6تالومع 


فعع. المع لقع , 
ممع عالأوالقعه , 


0 2م5_الا0ا5_...الأولاك_ذبااعم_ل0م 


00. 


« 513160 وونفاع 0 


« كعررئوع] رازعلا ا 
« جعع]ناموع م 


« 8098 اماع رع بلوع بالالرهع]0ا ع 


لنقوة /580110 20014 [ ]| 





هذه هي واجهة برنامج او حزمة ال156) “101631136991 في بداية فتح البرنامج تظهر نافذة ضمن البرنامج تعطيك آخر الملفات التي كنت تعمل 


عليها. أو تقوم بإنشاء جديد. 


من خلال (17016) يمكننا التعديل على الملف الذي نعمل عليه سواء من حيث النسخ واللصق والقص والبحث عن كود معين او أكواد مكررة وغيرها من 


العملبات. 


ينا 


(57363) ومن خلالها يمكننا التعديل على نوافذ البرنامج نفسه او عرض نوافذ التنفيذ والعمل ايضا وغيرها. 


(122561) من هنا يمكننا ادخال اي عنصر مع الكود بشكل جاهز سواء لصور او فيديوهات او جداول واشياء أخرى. 
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ماهى لغة او تقنية ال 55) ؟ 


هي لغة تصميم وتنسيق تحدد شكل وثيقة او صفحة الويب .1117/11 .من خلالها يمكنك تحديد شكل صفحة الويب وتنسيقها من حيث الشكل والمقاسات 
والمساحة وألوان الخلفيات والخطوط بكل دقة وحرفية. 


ما الفرق بين 55© و,.1171711؟ 


لغة ال ,7511711 تحدد هيكل واساسيات صفحة الويب او الموقعء, بينما لغة 55) أكثر حرفية وسيطرة على شكل صفحة الويب وأكثر توسع ودقة 
وتقنيات أحدث من غيرها. 


4 1 0 لاع دلوت 
طرق العمل على الدد) 22 22115152251361 
هناك ثلاث طرق للعمل على لغة ال 59 ) : در "وهم .مع انعو "جع مع "ووح عيرم اموموريوع ‏ "انمع راوع ازعو ”1-7مع 13112 


ءا -امارات 





طريقة السطر الوحد )ع©512 56916 ©112ددآ. 
طريقة الربط الداخلي )ع»©512 516516 1221211121 . 


طريقة الملف الخارجي )5126 ©5651 170©122[1. 


طريقة السطر الواحد 4اعع[5 56916 ع26ذآم1 : 


من خلال هذه الطريقة يمكنك عمل كود ال )0١959‏ في نفس سطر الجزء الذي تريد عمل تنسيق له او ضبط. وكمثال على ذلك: عمل تنسيق 
لنص معين بواسطة ال95'© 


< '' :ام 10121-517:12 :#110000 ::0101»"'-»56716 م>هنا نص معين <7/> 


كما تشاهدون أعلاه عملنا تنسيق لنص معين حددنا لون النص وحجمه بواسطة كود بسيط كمثال في الشروحات القادمة سنتعمق أكثر في 
أكواد ال 055 . 


طريقة الربط الداخلي ]©5120 51716 122121121 : 


> 15+ 


3 

3 1111321212 

5 

"م وح ار رمج "حدم ورت 561715 5 
112125 025جا ‏ ات -1 25ي) 3 
52512 ره 5 

5 
0د 115 ار > 1 





في هذه الطريقة يمكنك عمل كود ال 0099© داخل منطقة ال <126201/> <162300> تنشئ كود معين خاص بالتنسيق وفي داخل الصفحة في الاسفل 
والجزء الذي تريد تنسيقه تقوم باستدعاء هذا الكود مجرد استدعاء لا غير. ومن الشكل: 


من السطر ؟ الى السطر 7 يخص كود ال 2055© السطر > بداية الكود وهو إشعار المتصفح بأن الكود التالي هو كود ال 0055 .السطر " يمكننا عمل 
اكواد منفصلة كل كود له خواص معينة لأننا سنحتاج لكل جزء في الموقع كود معين ولن نطبق كود واحد لكل الموقع. 
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طريقة الملف الخارجي ]©5112 ©5651 17061121 : 


هي الطريقة المستخدمة والأكثر حرفية والتي ستقوم باستخدامها لعمل المواقع الكبيرة أو موقع مؤسستك او موقعك الشخصي. وهي أن تقوم بعمل ملف 
خاص بكود ال 2595 وفي هذا الملف تضع جميع أكوادك الخاصة بالموقع أو حتى بالإمكان عمل عدة ملفات من أكواد ال )١95‏ حسب حجم عملك 
وطريقة ترتيبك ويكون الملف بهذه بصيغة وح. مثلا لدينا ملف وو بأي اسم سيكون شكله التالي: ووح.51716 ملف 05985) اسمه 716و وال وو». 
ترمز إلى أن الملف هو من نوع 255©. 


الشكل العام لهذه الطريقة كالتالي: 


في السطر 5 طريقة استدعاء الملف الذي يحوي كود ال 095) وكأن الأكود كلها موجودة في صفحة موقعك ويمكن استدعائها مثل كود ال 0595© 
الداخلي. 


عناصر هامة تستخدم ال 55) في ال .1111311 ( 117 - 2دم؟ ). 
استخدمنا في الباب الأول في دروس ال ,7117311 الجداول لبناء الموقع هنا سنبني مواقع بدون استخدام الجداول الا اذا اقتضت الحاجه 
وقبل ان نتعلم حول ما هو ال 0319 نسرد هنا بعض اسباب تفضيل المبرمجين له عن الجداول: 

- مرونة استخدام ال019) وسهولة تعديله والتحكم به وباحترافيه. 

- ال039 صديق لمحركات البحث. 

- الجداول تعطي مظهر سيئ عند تحميل الصفحات ويبطئ التصفح. 


- كود أو وسم الآ277 (146 11155 ز0).: 


هو عبارة عن وحدة احتواء لعناصر صفحة الويب وبطريقة اخرى كبسلة العناصر وتقسيم محتوى صفحة الويب الى اقسام. ويكتب داخل 
صفحة الويب سواء ال ,2111711 أو ال 2117 بالشكل التالي: 


في الشكل امامك في السطر ٠١‏ هو بداية فتح كود ال1(117 .في السطر 0 
١٠‏ أغلقنا الكود وما بيذ | العناصر التي 1 5 يها ال 111 <"515 #0000 :10م "-6 518171 01> 
سنتعلم ال 095) على ال1(117 بشكل واسع في الصفحات القادمة 50-8 

<0057ط /ر > 
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ع 

- كود أو وسم 524811 (186 524831) . 

هو كود او وسم يتم استخدامه للنصوص والتحكم في خصائصها .في الغالب يستخدم ال019 بدلا عنها ولاختصار الوقت والعمل يعمل الكود 

ويكتب كالتالي: كما في الشكل السطر ٠١‏ بدأنا كود ال31ه57 بداخله استخدمنا استايل نوع ©1102«مة ووضعنا خاصية اللون الازرق للنص 
ووضعنا النص في وسط الكود ثم اغلقنا ال5021. 

>07 


<لقج5 /> هستا سبيكوتن القص اوررق <"1112ط:عدم1مع"-5171715 مقود>ع 


حت نط ار > 





طريقة عمل ملف ال55) وربطه بصفحة الموقع . 


من خلال برنامج ال 296 ©1(1:69311158625:©1 والذي نستخدمه في أعمالنا نقوم بالخطوات التالية: 


نقوم بتجهيز مجلد خاص ونسميه 055) في اي مكان في جهازك. نفتح برنامج الدريم ويفر 1(1©211258625©1 ونضغط 111 ثم 1187 
ستظهر نافذة نختار أو خيار وهو ,111711 ثم نضغط ع2636) أسفل النافذة على اليمين. هذه الخطوة لعمل ملف ,111711 صفحة ويب 
رئيسية للموقع الذي سنعمل عليه بال255) . 


نقوم بحفظ ملف الر7111711 .نضغط 01') مع حرف 5 او من أعلى حفظ باسم ثم نحدد مكان المجلد الذي سنضع فيه محتويات العمل 
ونضع اسم للملف وليكن 120167.11231 . ننشئ ملف و09 .مرة أخرى نضغط على »11 ثم 1217 ثم نختار من النافذة الخيار السابع وهو 
5 ثم نضغط زر ع7686). نحفظ ملف ال 55). بعد ظهوره نقوم بحفظ الملف كما في الطريقة السابق بجانب ملف الر1117/11 ونسميه 
©91.. لربط ملف ال وو» مع ملف ال1211 او صفحة الموقع نكتب ما بين ال 18650 السطر التالي: 


لعاع- احاوكت 
وم "2-8 و جاع وعقلطت ‏ : انعط رع عرمع ""عتجاروت ع ]وورمت ‏ ""صوبي 1 - ص وت عدت" 0-2 1 اوم سوعط مطعاعندهة 
121112 “2 1عتاتتات 115 251512112531112 


357 إرض 


دم "دوع اع اجاج قو "2-27 ومعر زه دوم رع رمج اعصورييت امم ووه 221-7511 2111211 


لاه - -اوارافت 





5 
0 
8 
9 


سطر " وهو كود الرابط (111) مجرد كتابة الحرف الاول من الكود يساعدك البرنامج في كتابته. 


[ع1 وترمز للغة الملف وحدد 509165164 وهي موجودة في البرنامج تختارها اختيار فقط.ع م97 وترمز لنوع الملف وتم تحديد ما بين 
القوسين اعلاه. 

أما 13:4[ فهي ترمز لمكان الملف وعند كتابتك له يساعدك البرنامج في تحديد مكان الملف وسيتكفل بكتابة كود المكان. سيصبح لدينا ملفين 
هما 101:11 وهي صفحة الويب وملف آخر هو وو56716.0 وهو ملف ال0955) الذي سيتحكم بشكل صفحة ال.151173411 او موقعنا. 


2 ٠ 
كما فى الشكل:‎ 

دكع,غ |5 لتحم اممغطيوع مما عع رميوع + 

+717اناء00ا غعع اذ عاذ ودالوء35) 16م72ناء 00 ااا ! ل عصممعطن) سس 

5ع 41 للا 5ع 3185 ند 2 

مهمه ل 

كععواط أمععع8 رخ 

ع[ نايواد حق” 
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خاصية الورائة 

تستخدم ال 2595© خاصية الوراثة» والوراثة هي استدعاء خواص معينه لتطبيقها على 27197 او نص داخل صفحة الويب. لماذا هذا 
الخاصية؟ جاءت هذه الخاصية لتسهيل العمل في ال055) فبدلا من ان تقوم بعمل جدول او نص او 17117 داخل صفحات الويب ويكون 
عددها كبير ا ستضطر انك تضع خصائص الاستايل في كل جدول و0157 ونص وتخيل عددها كبير.! لذلك جاءت خاصية الوراثة والتي تمكنك 
لعمل خواص معيينة (الوان - مقاسات - ابعاد .. الخ ) داخل شيء اسمه 1299© في ملف 295 وعند عمل 019 مثلا او جدول تقوم بعمل كود 
بسيط وتقول للجدول او النص او ال019 خذ خصائصك من هذا الكلاس فقط. هذه هي الفكرة العامة للوراثة والكلاسات (01255). عملية 
وطريقة بسيطة جدا وممتعه نتعلمها في الدروس التالية. 


خواص عامة في ال55) : 


هناك بعض العناصر في صفحة الويب اساسية ومعروفة وفي الغالب لايتم عمل كلاس (01,455)) لها وتحديد خواصها مباشرة في ملف ال 
595 .ممثلا: 3 12 -0039ط الخ, 


. ٠ ٠ | ٠ » © ٠ ١ 0ى‎ ٠ 
ل ُ حو ص للج100 - خلال :تم 1 : 5313552--25111 م 551211 ,م قلتتصطلة 21 :17 لنقة 1 - عاد ؟  تتقصط‎ 8 
الكود التالي: ( 4000222 :عم1مع ؛ قط‎ 


522117 1172358 , ""اللقضلتتة 1 1127 1313125" : 15 تلتق 1 - 11ت 2 1 خط ,قط م عط م 1ط 





في السطر ؛ حددنا خصائص ال70093 كاملة 
اي ان اي عنصر او نص داخل ال7007 ليس لديه كلاس او خصائص معينه سيتم تعميم خواص ال 007اعليه مباشرة. في السطر " تم 
عمل لون للخطوط من نوع 181 والتي تعلمناها مسبقا في باب ال 110111 وحدننا له لون معين لذلك اذا في كان هناك في الصفحة اي نص 111 
سيأخذ هذه الخاصة تلقائيا. 


في السطر ١‏ لو اردنا عمل خاصية لأكثر من عنصر مثلا 11 و 182 هناك طريقة بسيطة نضعهم جميعا ونفصل بينهم بعلامة (,) والتي 
تعني (و) واو المعية. 


الكلاسات والهوية فى ال 0655 (10, 613555 655) 


خاصية ال10 او الهوية: 


1 رف 


الووح لتحديد نمط او خصائص عنصر معين 
واحد فقط داخل صفحة الويب. ويعمل نفس عمل الكلاس لكنه لا يتكرر لأن الكلاس يعمل على تحديد نمط وشكل عنصر او مجموعة عناصر. 
ويكتب في ملف الوو0 بالشكل أعلاه تم إنشاء 10 وسمي 1862061 ويتم استدعائه في صفحة الويب والموقع بالشكل التالي: 


هي خاصيةه او مُحدد (:01])©ه©5©1) يستخدمها [ :صة 1 : 22-53122م2 : 24930930 : عدم 1مع ار 





رك 


لعرااء هداق 


<017/> هستا الهمحتويى <"عع0هعط"-10 01> 





من خلال المثال أعلى اي محتوى داخل ال0319 سيأخذ الخصائص الموجودة في ملف ال 295 اللون والحجم. 
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خاصية ال د5ع1255) 


خاصية الكلاسات في ال 00559 تستخدم لتحديد شكل عنصر او أكثر في الموقع وغالبا ما تستخدم لمجموعة عناصر خلافا ل10.ويطبق 
بالشكل التالي في ملف ال055) : 


4ع 1153:0155 . 7 

: 2250261 : عملامع 8 

: 23315-5511 5 ,52321253 ,م قناتالة 1 : 17 لناتة 1 11ت 1 9 
/ 1 


في الشكل أعلاه قمنا بعمل كلاس واسمه 168061 ووضعنا قبل الاسم نقطة وتشير إلى أنه كلاس وليس 01197 ,بعد الاسم فتحنا القوس في 
السطر 8 وضعنا خاصية اللون وفي السطر 4 أضفنا خاصية اسم الخط او نوعه. في السطر العاشر أغلقنا قوس الكلاس. 
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خصائص الضبط فى ال 055 
سنقوم بسرد الخصائص الهامة والمعمول بها بكثرة في مواقع الويب وتطبيق هذه الخصائص عمليا معاً. وقبل البدء بالتطبيق على الخواص 
وسردها سنقوم الان بعمل صفحة بسيطة فيها 017 ونصوص. في صفحة ال 126.271 التي انشأناها مسبقاً نقوم بعمل الكود التالي: 


لعرتوء هدك 
<015/,> هتا ترويسة الموقع <"7ع0هعط"-10 01> 
<01©» هستا القائهسة 01> 


<7/0315> هتا محتوى الموقع 20431 





في الحقيقة الكود السابق عبارة عن " صناديق او مربعات لكن عند تطبيقها وعرضها في المتصفح ستظهر بالشكل التالي: 


هنا القائمة 


1 2 ا 1 


هنا يأتي دور ال 155) لتحويل هذا الشكل من لا شيء إلى شيء واضح وجميل. داخل ملف ال 095) سنقوم الان بعمل 11 لترويسة الموقع 
وليكن اسمه #11262061 وداخل ال019 للترويسة نجعله يستدعيها كما وضعناها من قبل شاهد أعلاه. في ال019 الخاص بالقائمة سنضع لها 
كلاس وليكن اسمه 22201. ونضع ايضا كلاس لصندوق المحتوى وليكن اسمه 01166136»ح. وسيتساءل البعض لماذا الصندوق الاول وضعنا 
8 ووضعنا 1255© للصناديق الباقية؟ بعد فهمك لهما يمكنك عمل ما تريد ليس هناك قيود وقد عرفناهما من قبل وعرفنا الفرق وحسب 
سياسة بناء مواقعك يمكنك استخدام ما تريد. 


نبدأ بتجهيز الكلاسات داخل ملف ال095) وستظهر فارغة بالشكل التالي: 





: "2ع 11" عدموع و ررح 4 


+ 41جعك ل ددطدطة 
122114ة. 


( اطع ع صمت . 


كما تلاحظ أعلاه وضعنا الكلاسات وسميناها حسب ما اتفقنا مسبقاً وعملنا حفظ للملف .يأتي الان دور استدعاء هذه الكلاسات من صفحة 


الويب [122016:.11111 كل صندوق أو 0119 يستدعي الكلاس الخاص به. وسيكون الاستدعاء كما بالشكل التالي: 
<015/,> هتا ترويصسة الموقع <"2ع20ع5"-10 501 


< 031 /ر» هستا القائهة << "" التموم"”-5 135 1م 


<015/> هقا محتوى الموقع <"عماتاع ألمت "5-7 قم لت 20137 





كما هو في الشكل اعلاه صندوق او 019 الترويسة استدعى ال10 الخاص به وهو 162061 وال019 التابع للقائمة استدعى الكلاس التابع 
له وهو 11دررع:ج وال 019 الأخير الخاص بمحتوى الموقع أيضا استدعى الكلاس الخاص به. قم بالتطبيق .هل وجدت تغييرات ؟ طبعا لا .لآنك 
كما تلاحظ أعلى في ملف الوو50916».0 الذي وضعنا فيه الكلاسات مازالت فراغة وليس بها اي خصائص في الدروس القادمة سنقوم 
بتعبئتها وتغيير شكل الموقع بشكل كامل كل خاصية على حده. 
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خاصية الحدود 5 الجوائب (5ع80:0 055) 


من خلال هذه الخاصية يمكنك عمل حدود للصندوق ووضع لون مناسب ايضا وستايل محدد للحدود ايضا. والحدود هنا لها ثلاث قيم : 


-١‏ عرض الحدود (5730612-:101:161): وهي لتعيين عرض الحدود قد يكون عرض نحيف او ثخين او متوسط. 
-"١‏ شكل الحدود (5]916 -:101:0161):وهي تعيين شكل الحدود إما منقط أو خط مقطع او خط عادي. 
"- لون الحدود(:20101 --1701:061):يمكنك أيضا تعيين لون الحدود بأي لون تحدده. 


يمكن كتابة الكود بالشكل التالي (التطبيق على الترويسة الخاصة بالمثال) : 


العناء)- تاها 
2933 :عدن امع عع عوط 
مها 50211 : 1113 71 م 8 نط 
/ :2222م : 1جز هع ل عمط 


.11511145 7 


( 1ت تع حصت . 





في السطر ه استخدمنا احد خاصية الحدود وهي اللون وحددنها ثم أغلقنا بفاصلة منقوطة وهي مهمة جدا(الفاصلة) . 


(ملاحظة في برنامج الدريم ويفر الذي سنستخدمه يساعدك كثيرا في عمل البرمجة فهنا مجرد عمل كلمة :©7011 سيقوم البرنامج بوضع 
خيارات كثيرة امامك لاختيارها ليسهل عليك الكتابة وسترى انواع وطرق كثيرة ل 201:06 .) .في السطر ١‏ حددنا العرض واخترنا 
0 وتعني متوسط. في الغالب نستخدم خاصية البيكسل وهي بدل 723011113 نكتب م1 او أي عرض نريده. جربها سنستخدمها 
بكثرة فيما بعد. 


في السطر السابع حددنا شكل الحدود واخترنا 10160 وتعني منقط هناك خيارات كثيرة ستظهر لك في البرنامج وغالبا نستخدم 50110 هذه 
الخاصية حدود خط واحد. 


بعد شرح الكود وحفظ الملف نأتي لنرى النتيجة سيظهر الموقع في صفحتنا [1206:2.02 بالشكل التالي : 


من خلال ملاحظتك للموقع ستتساءل لغرابة الشكل .لكنا دعنا نقوم ببعض التعديلات وخواص الحدود وانظر الكود التالي: 


2024 عط 
:4933 :1052م -ععم عوط 
:2 : ط06 2022062-13 
:11 : 5216-ع20162 520 





قمنا بتعديل العرض واخترنا العرض :17 وتعني واحد بكسل فقط. عدلنا شكل الحدود من منقط إلى خط عادي50110 وسيظهر الموقع 
بالشكل التالي: 
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هنا القائمة 
1 


هنا محتوى الموقع 


كما رأيت في الشكل السابق عملنا 10 ووضعنا خاصية واحدة من خصائص ال55١)‏ وهي ال3ع701:0 بقيمها المتنوعة .نقوم الان بنسخ 
نفس خصائص ال 14 للكلاسات الخاصة بالقائمة والمحتوى وسيظهر الكود في ملف ال299) بالشكل التالي: 


اع ممح ما 
: 2933 ممه 1مع-عع عمط 
:73131 -ع م عمط 
+ 1182ه585 :25712 م عع عوط 


11211 . 
: 2933 :عدم لامع عدم عوط 
2 : عق 1ج عع عمط 
([ 351132 :ع 1اجتع ع -عع ل عمط 


1 2ت عاطمت . 
2933 :عم1امع عم عمط 
:7131 - عع عوط 
+ 55113 :52:12 -عرم عوط 





قم بالحفظ وافتح صفحة الموقع في المتصفح مرة أخرى لنرى النتيجة. ستراها بالشكل التالي: 


ها ترويسة الموك. 





يمكنك استخدام الطريقة الاحترافية والتي تستخدم لعمل الكود السابق الخاص بالكلاس او ال 10 وتحويل السطور الثلاثة الى سطر واحد 


533 
كالتالي: 
306214 عمط 4 
م1 24933 :عم عوط 5 
/ 3 


لاحظ. وكأنك تقول برمجيا: الحافة تأخذ لون #993 وعرض 2زم1 وشكل 50110 من دون أن تكتب الخاصية. وهي الطريقة الأسهل والاسرع 
والافضل. 
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قم بتجربة الخصائص والقيم التالية في ال عرع 0زم( ٠:‏ 


خاصية اللون للحافة اليمنى فقط 
(في التطبيق السابق طبقنا على جميع الحواف وهنا يمكنك عمل خصائص للجوانب 
التي تريدها سواءً 011غ)720 - اأ1»1 - اطع 1" - م0)) 


زعنااة/ :عالضد-غطو-مع60:0 | خاصية شكل الحافة يمين فقط 


زعنااة/ا :مامع أطوم-مع00 
(علااة/ا : تعني القيم التي تختارها) 


0 
خاصية الحافة للأعلى: عرض :م1 نوع 01101 اللون كما هو محدد 
تي رض اتحوه ف لاط 
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خاصيةٌ الطول والعرض (أطاع1اء11 210 1171011 55)) 


من خلال هذه الخاصية يمكنك التحكم بمقاسات الطول والعرض داخل صفحة الويب وهي من الخواص المهمة في ال095) وتكتب بالشكل 
التالي: 


1ع 05د 215 
1 م1 24933 نعم لعمط 
81152 : طع 13 
عتن) 910 : قطان 1151 


1 رض إزع فد :8 ل 


خاصية 17101 وتعني العرص في السطر ” وتصع القيمة المناسبة ثم الفاصلة المنقوطة. السطر ٠“‏ 1ع وتعني الارتفاع وتحدد لها 
القيمة. 
طبعا يمكنك عمل القيمة بثلاث طرق وهي : 

-١‏ القيمة بالبيكسل مثل : كما في المثال السابق. 

"- القيمة بالنسبة مثل : :710412:5096 وتعني خمسين في المائة من عرض المتصفح لأي مستخدم. 

"- القيمة الاتوماتيكية مثل : :21140 :77101112 وتعني مقاس اتوماتيكي أي اذا يصغر ويكبر سواء الطول والعرض حسب المحتوى 


للموقع مثل الطول لا تستطيع ان تجزم بطول الموقع مثلا لديك مقالة في موقع اخباري منها الصغيرة والكبيرة يكبر الطول مع 
المقالة الطويلة ويصغر مع الصغيرة. 


طبق المقاسات السابقة على ال162061 في الموقع الخاص بالتطبيق. سينتج لك الشكل التالي: 











لاحظ شكل الموقع العرض اصبح ٠١‏ بكسل والطول 1٠٠١‏ سنقوم الان بتعديل الطول وجعله ٠٠١‏ بكسل. أيضا نقوم بوضع مقاسات 
القائمة من خلال الكلاس الخاص بها الطول ٠‏ ؛بكسل العرض ٠١‏ بكسل ايضا المحتوى نضع له مقاس خاص به العرض ٠١‏ بكسل 
الطول نجعله اتوماتيكي. وسيظهر الكود بالشكل التالي: 


2 . 2223 3ط/عده» . 558 | تعلم البرمجة | 0تهن . 32202203 ط- عد د16 . جما 














1ع 01ج مط 
551313 عنم1 24933 بعع عمط 
2 لاناق : ات 1 
عزنا نأك : مقطن 1ع1آ 


كر ال 


حَ 
7 
8 


112101 . 
: 55113 عنم1 24933 :معع عمط 
2ن ا : طعت 71 
+1 2ك : تدان تغط 


2م1 24933 : عع عمط !ده رمه . 
2لا لأا : طعا 713 
+ 1152ات : عقطق 121 





بعد عمل الكود أعلاه وحفظه نقوم بتجربة الموقع او الصفحة الخاصة بالتطبيق وستظهر بالشكل التالي: 


3 > ب 2 
هنا لنرويسة الموقع 





الهوامش (كداع1121 055). 
ونعني بالهوامش هنا المساحات الجانبية او الافقية وهي مقدار بعد العنصر عن الأعلى أو الاسفل او اليمين واليسار. وتكتب بأحد الأشكال 
التالية: 


51 102-11ع:2131 وتعني مقدار الهامش من اليمن. 
12-11ع:2121 وتعني مقدار الهامش من اليسار. 
م0]-12ع:2231 وتعني مقدار الهامش من أعلى. 
111-3ع:2131 وتعني مقدار الهامش من أسفل. 


بالنسبة للقيم بمكن ان تكون بالبيكسل أو اتوماتيكي وسيتم وتطبيق كلا منهما على حده. وسنقوم بتطبيق جميع الخصائص اعلاه للهوامش في 
التطبيق الخاص بنا وبالتحديد ل :1222061 وسيكون بالشكل التالي: 


1ع 305 1 2 
2 نم1 2933 نعع نل عمط 
نا نا : 6ك 1ه 
نا نا 2 : قطن دعا 
582 : 3131 120111-21 قالط 
: 522 : 1111-1511 قن 
2 : 219 -0111 151 
52 : لاع عا ضط-11 151201 
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كما تشاهد أعلاه في السطر ١‏ حددنا هامش الترويسة من اليمين وحددنا الهامش بمقدار ه بكسلء أيضا السطر 1 حددنا الهامش من جهة اليسار بمقدار 
5 بكسل السطر ٠١‏ حددنا الهامش من الجهة العلوية بمقدار © بكسل. أيضا في السطر ١١‏ حددنا الهامش من اسفل بمقدار ٠‏ بكسل. 


نأتي الآن لمشاهدة النتيجة وكيف سيظهر شكل الموقع بعد حفظ التغييرات أعلاه. وحسب الشكل التالي: 





لاحظ في المثال أعلاه ان الترويسة تم إبعادها عن جميع الجوانب بمقدار ه بكسل. إذا اردنا ان نجعل الترويسة او أي صندوق في الموقع في وسط 
الصفحة او المتصفح نقوم بعمل قيمة (21140) لكل من الهامش من اليسار واليمين فقط. وتعني ان الموقع يظهر في وسط المتصفح سواء كان طويلا او 
عريضا. نقوم بتطبيق ذلك وسيكون بالشكل التالي(لاحظ السطرين /و1): 


01221 دعا 
2م11 2933 بعع عمط 
عزنا لا : طع ك1 
نا لاك : طن 1 2ط 
1115 : 1ق 121121-21 قن 
25ت : 12111-121215 قن 
م5 : 19 120111-23 قن 
52 : لامعا عاصط-3 231 هته 





هناك طريقة لدمج جميع القيم الخاصة بالهامش في سطر واحد وايضا طريقة أخرى لجعل جميع الصناديق داخل صندوق واحد ونقوم بتوسيط الصندوق 
الذي سيحتوي على الصناديق أو ال019 الموجودات في موقعنا. 
في البداية نقوم بجمع جميع ال019 داخل ديف واحد ولنسميه 283 ونضع له كلاس ونسميه ايضا :2283 سيكون الكود في صفحة ال 1231 كالتالي: 
"52111" -5 5135 2011 
<0315/>» هتا ترويسة المسوقع <"عدعمدعط"-10 03> 
01> هتا القائهة <" العم" -5 1235 01> 


<2/0315©* هقا محتوى الموقع "الع نامج "5-7 155 0115 
<031 > 





في السطر ١١‏ فتحنا ال019 واعطيناه كلاس 83 وفي السطر ١8‏ أغلقناه وجعلنا جميع ال010 البقية داخله. سنقوم الان بوضع الخصائص المناسبة 
للكلاس 138311 في ملف و50716».05 وستكون خصائصه بالشكل التالي: 


111 
عنقت 133:1 قتد 
:12 551383 830 2 :عع عمط 
عتررنا لاق : طع تك 1م 





قمنا بعمل الكلاس الخاص بال019 العام الذي سيحوي جميع محتوى الموقع :223 .في السطر ٠ه‏ استخدمنا خاصية الهامش بطريقة أخرى وهي تعني 
مقدار الهامش لأعلى واسفل يساوي صفر ومقدار الهامش من اليمين واليسار اتوماتيكي. وهي اختصار للشكل التالي من السطر 7 الى السطر ٠١‏ : 
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153121 . 
م 55113 30" 4# : مموعصوط 
نا نا8 : طط ك1 
: نا : مرمع -2 121 مقن 
نا : اصع 1 ضط -2 11 قن 
عاناتتق : 1121-1521215 12 قن 
عانق : 3131 1203111-11 قن 
ْ 





بعد تطبيق الكود السابق الخاص بال019 العام والهامش للتوسيط سيظهر لنا الموقع بالشكل التالي: 
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سنقوم بإلغاء اللون الأحمر الخاص بحدود ال019 العام ونكتفي به كتوسيط وحاوي لبقية ال018 .سنلغي السطر رقم ٠‏ من كلاس 208311 حتى لا يظهر 
الحدود الخاصة به. ويكون معنا الشكل التالي: 





من خلال ملاحظتنا للتطبيق أعلاه سنقوم بعمل مسافة ما بين القائمة والترويسة وما بين محتوى الموقع والقائمة. فكر ماذا يمكن ان نقوم به وما هو 
الكود الذي سنستخدمه النتيجة في الشكل كالتالي: 





116111 . 
32 : نرت 1311-2 قتر 
5 122 24933 :معع عمط 
:تنا ناة : ط 13م 
+7 عضن ك : طن عدا 


1522 2933 :عم مع صط ! خدة عنمت . 
323 : نروت ع -31131ن 1 قلر 
نا )8 : طع 13 
م 1125اق : عاطق تغط 





ملاحظة: يمكنك استخدام القيم الخاصة بالهامش (7ؤع2131) بالسالب اذا اقتضت الحاجه. جرب ضع قيم بالسالب ولاحظ ماذا يحدث. 


الخلفيات (1205ا10ع1ء2 055)) 


الخلفيات في ال55:) الأكثر استخداما. يمكننا استخدام الخلفية كصورة أو لون معين والقدرة على التحكم بمكان الخلفية وثباتها. 
1:0111101-0101ع7212 لتحديد الخلفية ك لون . 

©72151:0111101-11125 لتحديد الخلفية ىك صورة. 

0--11011200 لتلتحديد مكان الخلفية (توسيط - يمين - اعلى - أسفل .. الخ). 


721251:0111101-11 لتعميم خلفية معينة صغيرة بواسطة تكرارها. واتجاه التكرار (افقي ‏ عمودي ). 
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أناء لط 10-242ناونرعءل 72 لتحديد ثبات او امكانية تحرك الخلفية عند التصفح. 


سنقوم بعمل خلفية للتطبيق الخاص بنا ونلون خلفية الترويسة والقائمة والمحتوى نحدد لون كخلفية وهي عن طريق وضع كود الخلفية في ال10 
المسمى لدينا 1222063 والكلاسات البقية ملف ال95'©) كالتالي : 


السجاء!- تماد 
152 4933 بعع عمط 
0 80 : طعق 1ج 
عت نالا ك : متاق 151 
8:91 24 : عم1مع- مصستام طوعطع هط 
: 


20211 . 
32 : ت6 -121131 قتا 
152 24933 بعع عمط 
23ل 80 : 31 71 
2 : طن دعط 
+ 2 2 :عدم 1مع- لمصستام طوعطع هط 


:1 2م15 2833 : عدع عوط ! اده ادمع . 
:2 : 19 1331131-23 قنا1 
ع0 80 : طعق 1ج 
م عاق : متاق 11:51 
|4515 : عدم 1مع- لستامعدوعاء قط 





لاحظ في السطور ١5‏ و 74 و "١‏ في الكلاسات تم استخدام كود الخلفية الخاص بالألوان واخترنا قيمة لون محدد. شاهد النتيجة وتطبيقها بعد الحفظ: 





هنا القانه 





هنا محتوى الموقع 


نقوم الان بوضع خلفية للترويسة بواسطة صورة بحيث تكون مقاسات الصورة نفس مقاسات الترويسة الطول ٠٠١‏ بكسل العرض ٠٠١‏ بكسل. 


نقوم من خلال برنامج الفوتوشوب بعمل الصورة اللازمة بأي لون واي شكل. معنا الترويسة التالية: 


11110 


دورة المواقع والإعلام الإلكتروني 
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نقوم بعمل مجلد خاص بالصور داخل ملف العمل ال95١)‏ ونسميه و12 يصبح لدينا الملفات التالية: 


ككعع ابتاك [ل 655 _ احمعغطئع مما 59 
211 اناء هنا لععلاك عارواذ وماندعءدمه) ِ خمع سناع هنا اا [ ل عمصصعطنا ا ِ 
ععابردا 495 عابرا 506 سبلي يا 3 


نحفظ الصورة التي تم تصميمها بصيغة عم( ونضعها في مجلد الصور الذي قمنا بإنشائه. بعدها نقوم بعمل الكود الخاص بخلفية الصورة وهو 
721281:011201-11128 عند عمل هذا الكود مع النقطتين ستشاهد خيار يعطيه لك برنامج ال:وع:1(6211158625 كما في الصورة: 


+3221 مغ 
133 نم1 2933 بعع عمط 
2لا لا 8 : 1 
عزنا ناك : 12ت 1151 
: 11333 - تامع وعاء قط 
ققلئامم8 هه / 
أمعداما © 
0 06 بس 21 112 . 
لقأ 1نما! - مت : مروع -2 3ج 112 
م1 2933 اأعع عمط 





من الخيارات نختار ©71:01385[ ونذهب لمكان الصورة التي صممناها ونختارها وسيقوم البرنامج بوضع الكود امامك كما في الصورة التالية: 


21 01د عد 
1522 24933 :عدم ل ندمط 
811 : طعت 1ج 
: 22لا نأك : عأطانق 1151 
: نز . 1512321 “,3251353 ) 111 : 123332 - لتنامع و عامط 





في السطر ١١‏ اخترنا الصورة والتي اسمها م8 .113561 والموجودة في مجلد وع12 ويرمز ال1ون الى الرابط الخاص بمكان الصورة كما هو اعلاه. 
نقوم بعمل خلفية من نوع آخر. حسب التصميم التالي: 


ظ عد 


مز ضع دما مل لعن قدصا 


لاحظ الصورة ع1112862.[7 العرض 5" بكسل الطول ٠٠١‏ بكسل سنقوم بعملها كخلفية للموقع (الترويسة) نقوم بالتجربة أولا ونرى كيف ستظهر. 


وحسب الكود التالي: 


السمداء ته 
11 2م11 24933 :معم عمط 
82 : 731-111 
نا نا ك : 5151-3111 
: 25 . 110122322 ” 170135 ) 111:1 : 223355 - تاصستامع وعاع مط 





من خلال الكود السابق ستظهر النتيجة التالية. 
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هنا القائمة 


من خلال الكود السابق يمكن تحديد تكرار الخلفية سواء بشكل أفقي (75) او عمودي (9).لو قمت الان بتوسيع مقاسات الترويسة الطول والعرض 
ستظهر الخلفية بشكل كامل ويتم تكرارها افقي وعمودي عند عدم تقييدها بكود معين. 


سنقوم الان بعمل الكود المناسب لهذه الخلفية حسب التالي: 


ل عدت 01د ع ررك 
ص1 24933 :معدم عوط 
نا نا 8 :10111 
13لا ناك : عاطق 51آ 
: ( 1253 . 113322 ,17335 ) 111:1 : 3335 - ل تنام عدو طاح قط 
ع ماق عررع 2 : 1ه مرردع نان ع2 عات دظطا 





في السطر١١‏ خاصية تكرار الخلفية حددنا اتجاه التكرار بشكل أفقي فقط. للتأكد قم بتعديل الطول قبل وبعد التعديل من ٠٠١‏ الى "٠٠١‏ بكسل ولاحظ. 
نقوم بإرجاع الخلفية السابقة عم ز. 11212561 . 


خاصية (20-205161012نا10مءلاء152) ف حال لديك خلفية لموقع صغيرة مثلا يمكنك اختيار هذه الخاصية وجعل الخلفية تتوسط الصفحة بامكانك أيضا 
وضعها في اسفل واعلى الموقع. جرب ذلك. 


خاصية (1221251:0111101-266211121116) تعمل على تثبيت الخلفية لل7003 لتعطي نوع من الشكل الثابت للخلفية العامة بحيث اذا حركت الموقع الى 
اسفل او على يتحرك ال019 العام للموقع تضل خلفية ال70013 ثابته. ويمكنك اعطاء القيمة 820 لها. جرب ذلك ايضا. 
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طريقة أخرى لعمل الخلفية والصورة التي قمنا بعملها للترويسة. والطريقة كالتالي: 


-١‏ نقوم بعمل خلفية للون الذي صممنا منه الصورة ونجعله للترويسة. 
1 نصمم شعار واسم الموقع في صورة صغيرة خلفيتها نفس خلفية الترويسة او نجعلها شفافة. 
“"- نضع صورة الصورة داخل ال0108 الخاص بالترويسة وننشئ لها كلاس لتحديد مكانها إن لزم الأمر. 


لاحظ الصورة التي صممناها وسميناها عومز.1080 ووضعناها في مجلد الوع111 


, 3015 ] س1 


ممغادء 0 !1 
كمه لل 
ووو 5ع وام +معععم | 


١ : : :‏ : عمازنانوا5 هه 
ومز.هوه! وم زع و3 لما وم[ ل وهدما 3 








كعمقرطنا و 
دممة لها 
0015 دا 
ع اكنال الى 
كع]نق 1م إضظآ 
عمعكء ا اهقلق 


سنقوم بوضع الصورة داخل ال01198 الخاص بالترويسة ونحذف كلمة (هنا ترويسة الموقع) »ونقوم ايضا بحذف كود الخلفية الخاص بالصورة نستبدله 
بخلفية اللون كما في الكود: 


2" 2 دهم" -5 1535 2031 


"رع 03دع :101-71 20137 
</, "320 . مومه1 “رد جدة "عجعع 5 1110 > 
<01 > 





في السطر ١١5‏ وضعنا صورة الشعار. 


السمداه- اماد 
22ن1 14933 مععلعصمط 
12 لا : طاع 713 
نا نا 2ك : عاطق 12121 
: 22299101 : عدم 1مع -تقتامع وعطاع قط 
251211232 : 11521531 5 ضحم - لتنامع وعلاء قط 
21253 : عاق تلت ق عا 12 5 - 1نامع وعات قط 
ْ 





في السطر ١5‏ وضعنا خلفية اللون» وستكون النتيجة بالشكل التالي: 


11110 


دورة المواقع والإعلام الإلكتروني 





لاحظ الصورة ذهبت لليسار. يمكننا إضافة خاصية معينة لل+31 الخاص بالترويسة وهي خاصية اتجاه المحتوى وان يبدأ من اليمين لليسار بواسطة 
الخاصية 01601011 نقوم بوضعها في ال14 الخاص بالترويسة شاهد الكود التالي: 
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3 
0 
م‎ ١ / 

17 
دا 

1 


+ عدت مده 2 
م1 24933 :عع عمط 
تنا نا 8 : طع 13 
نا ناك : طق 1121 
: 222991010 : عم 1مح - لتنامع نعلت قط 
221112212 : 112310533 5ق مج - ل تتتامع وعاى هط 
2122523 : عا تلتاقتقطت تع 5 قت - قت تتنامع وعاى هط 
: 21 :ده 1 طاعدمع 01 
/ 





في السطر ١9‏ اضفنا الخاصية 20 وحددنا القيمة 11 وتعني من اليمين الى الشمال. وهذه الخاصية مهمه جدا نظرا لأن المواقع باللغة العربية 
تستخدم هذه الخاصية لمحتوياتها سواء للنص او الصور او اتجاه اي عناصر داخل الموقع. بعد التعديل والحفظ سيظهر الموقع بالشكل التالي: 


16 


عيان لع ع يان نيالك 











ملاحظة: استخدمنا طريقة الصورة والخلفية لجعل محتوى الموقع اقل حجما وان لا يكون الموقع مليء بالخلفيات والصور التي تؤثر على سرعة 
التصفح للموقع. 


خاصية زوابا الحدود (1-1:201015ع01:0 55)) 


من خلال هذه الخاصية يمكنك التحكم بزوايا ال010 وجعل زواياه اكثر مرونة وتحويلها من زوايا حادة الى زوايا ملتوية باستخدام الكود -0::067طا 
15 والقيم الخاصة بها بالبيكسل. سنقوم بتطبيقها على الترويسة وجعل الزوايا الاربع ملتوية بمقدار © بكسل. شاهد الكود ثم النتيجة: 


1ع 15ح م روا 
2م11 2933 بمعع عمط 
تنا نا : 161 
عزنا ناك : عاطانق 121231 
222991010 نعم 1مع- نت سصستامع و طاح قط 
ات 11ت : 11231531 قصج- اصستامع وعات دظط 
112203 : 11 تاصق عا عاق - لتنامع وعات قط 
211 :تهت 1 عتمم 011 
م5 م5 م5 : 115 1 ص5ع عم لمعروظط 





من خلال الكود اعلاه سطر ٠١‏ تم عمل الكود وحددنا مقدار حدة الزوايا او التوائها بالترتيب الاولى للزاوية اليسار العلوية الثانية للزاوية اليمنى العلوية 
الثالثة للزاوية السفلى في اليمين. بطريقة أخرى حسب اتجاه عقارب الساعة والبداية من أعلى اليسار. 


عند الحفظ والتطبيق سيظهر لدينا بالشكل التالي: 
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16 


عزعاكن ع ع يان ناتك 











شاهد أعلاه تم تعديل الزوايا وتحويلها من زوايا حاده الى زوايا ملتوية بمقدار © بيكسل. قم بتغيير القيم وجرب بنفسك. حاول ان تجعل الزاويتين 
العلويتين غير حادتين والسفليتين حادتين. يمكنك استخدام الصفر ايضا صفر بيكسل. 


خصائص النصوص (5غ1ااء م210 ع1 55)) 

سنستعرض أهم خصائص النصوص المهمة دفعة واحد وهي من أهم الخصائص التي تقوم بعمل تنسيق وتلوين النصوص حسب ما يراه المصمم أو 
مدير الموقع. 

قبل البدء بخواص النصوص .سنقوم بتطبيق خصائص النصوص على محتوى الموقع للتطبيق الذي نعمل عليه نضع صندوقين او " 019 داخل صندوق 
أو 37 المحتوى في الموقع ونضع لهما خصائص من حيث المقاسات والحدود كما تعلمنا. نضع الصورة على الصندوق الأيسر والصندوق الأيمن 


للنص. سنضيف كلاسين واحد لليمين وواحد لليسار كي نحدد خصائص كل واحد من منها. 


نبدأ بعمل الكلاسين داخل ملف ال255) الكلاس الخاص بال0190 الايسر نسميه 1250197. والذي سيحوي الصورة ونسمي الكلاس الذي سيتحكم 
بخصائص ال0190 الذي سيحوي النص ]2رع). والتسميات هنا حسب ما تريد المهم ان لا تختار اسم محجوز مثل 12,12 أو 7200 اف م. 


سيكون شكل الكلاسات كالتالي: 


. 111293031714 7 


+ 21ت ص 





كما تلاحظ في السطرين ك5" ول" تم عمل الكلاسات وكما تراهما فارغين. نقوم الان بعمل ؟” 0137 داخل ال018 الخاص بمحتوى الموقع كما اتفقنا مسبقا 
في ملف 1720167.161111 وسيكون الكود كالتالي: 


< 3313 هستا القافقهسكةك حت "" لصوم" م مم زه 1ه 


"11127 طاتقوج 5-7 15ت 203357 
:"عدت "5-7 15ت 203137 
هتا صستكون الصورة 
011 ره 
<<" 5-7"3159311 5ه ورت 2011 
1315 ار هه 

37ل ار 
<015 ره 





في السطر ٠‏ بداية الصندوق او ال-015 الذي يحتوي الصندوقين الخاصين بالصورة والنص. ونهايته في سطر في السطر "١‏ عملنا صندوق أو 
137 النص واعطيناه الكلاس الخاص به الذي سيحتوى على خصائصه وأغلقناه في سطر ".في السطر 74 أنشأنا صندوق او 017الصورة واعطيناه 
الكلاس الخاص به وأغلقناه في سطر 7 ".سيكون الشكل كالتالي: 
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هنا القائمة 





سنقوم الان بوضع خواص لل١‏ 017 الخاصين بالصورة والنص. سنضع الخواص والقيم التالية: 


- نحدد عرص ال039 الخاص بالصورة ٠٠‏ بيكسل. 
- تحدد العرض الخاص بال النص ٠‏ بيكسل. 
- نحدد الحدود الخاصة بالصندوقين وتحديد لون معين. 


بعد تنفيذ ما سبق سيكون الكود في ملف ال 055) بالشكل التالي. 


1 17032115 . 
19 : 1316 
81 2 55113 جعم 1 :عردم عمط 


1 21 ع1 . 
عت م581 : ط6 3 1 
:81 2 55113 جعم 1 :عردم عمط 
أن 5ه 1ع :عهه21 
في السطر 6" أنشأنا كلاس خاص بصندوق أو 019 الصورة وخصصنا له بعض الخصائص وهي : 
السطر 7" وحددنا في العرض ١5١‏ بكسل. 
السطر "١‏ وحددنا فيه الحواف او اطراف ال1197 من حيث السمك ١‏ بكسل ونوع الحواف خط عادي واللون كما هو محدد اعلاه (#1"00). 
في السطر 4١‏ انشأنا 0117 النص واسميناه :م2 وحددنا فيه خصائص الصندوق الخاص بالنص واعطينا الخصائص التالية: 
العرض وحددناه 58١‏ بكسل. 
الحواف كما في صندوق الصورة. 
وحددنا خاصية المكان (11084) وحددنا يمين (161:4) والهدف منه جعل الديف في نفس السطر بجانب الديف الخاص بالصورة على اليمين. 


وسيكون الكود في ملف الرم]طامم كالتالي: 


2 . 2223 3ط/عده» . 558 | تعلم البرمجة | 0تهن . 32202203 ط- عد د16 . جما 








حر لوطا > 
"5512" -5 35 1ه 20315 


< ""عرك لمدعم " ->01 1 0311 
</ "323 . مم15 ”,5 هد "”ععع1 5 11010 > 
011 ره 


< 013 “ر» | هستّا القائهسكةك حت "" اهنم" م 35 1ه 117مته 
<<" رت رومع 5-7 5ت رت 7 2031 
"ععرهع 27م 5م زه 203157 


هتا سيكون التص 


0317 ره 
”1233131 "5-7 5م لت 2041 


هتا ستكون الصورة 


11 ره 
112 رجه 
112 “ره 


ل" َ, 
[! سام 
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رص ط ار 





بعد تنفيذ الأكواد السابقة سيكون شكل الموقع كما في الصورة التالية: 


111 


دورة المواقع والإعلام الإلكتروني 





2 . 2223 3ط/عده» . 558 | تعلم البرمجة | 0تهن . 32202203 ط- عد د16 . جما 


نأتي لعمل النص وخصائصه. نقوم بعمل 17117 خاص بالعنوان داخل الديف الخاص بالنص وديف آخر بتفاصيل العنوان نفسه ونقوم بعمل كلاسين كلاس 
يخص العنوان وكلاس يخص التفاصيل ونضع لهما التسمية المناسبة : 


بداية نقوم بعمل كلاسين للنص والتفاصيل في ملف ال وو916.0]ه كالتالي : 


. 2121247 


. 15551135 + 





كما تشاهد أعلاه تم عمل كلاس (1)16)) ويخص العنوان وكلاس (16493119) ويخص التفاصيل. نقوم الان بعمل الديف الخاص بالعنوان والديف الخاص 
بالنص وربطهما بالكلاسين أعلاه في ملف 11116:2.11611. كما في الصورة التالي: 


<<" 2116م ع رمت "" عه م تق ره 203157 
:"يردج الحو ومع زهت 20115 


<015 ,> ستا العتوان<"512152"-12555ه 03> 
<031/ > هتا التقاصيل القاصة بالعتوان<"2115هع2ع"-1355ه 03 


015 ره 
<2 "53117 1 "5-7 55 1ت 201317 


تا ستكون الصورة) 


11 ره 
17ل “ره 





من خلال ما سبق نلاحظ أننا أنشئنا 017 خاص بالعنوان وأعطيناه او ربطناه بكلاس (©101)) وأنشأنا ديف التفاصيل أعطيناه كلاس (1612115). نقوم 
الآن بعمل عنوان مناسب كتجربة بالإضافة الى تفاصيل أخرى كبيانات افتراضية كما في الصورة التالية: 


<015/ > جزيرة سقطرى حجهسال الطييعة والسياحة ب الممنخ<"”51812”-5 55 1ت وجا ماع ف 
<157 5-5253 35 1ه 20115 


سقطرى وتكتب أيضا سقطراء أو صقطرة أو سوقطرةء هي أرخبيل يعتي مكون 
من أريع جور على المعحيط الهتدى قبالة سواحل القرن الأقريقي 350كم 
جتوب شيه الحعزيرة العربية[1]. إن اتعزّال الجريرة الطويل عن أقريقيا 
وشيه الجزيرة العريية قد خحلقف مستوى قريد 
وغير مألوق من الاستيطان الحيوى على الجرّيرةء وكذلك قي العمستوى الاجتساعي لسكان الحجزيرة 


1 ره 





11 ره 


كما تلاحظ أعلاه اضفنا عنوان وتفاصيل وستكون النتيجة في المتصفح كالتالي: 





١/08 ||: 00967 0 0‏ 
الاكدا أع0.0أم حاعع0©1م1 :اأجممع ‏ 772755202 2:00967 |8 ١/60‏ 
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دورة المواقع والإعلام الإلكتروني 


جزيرة سقطرى حمال الطبيعة والساحة - اليمن 

سقطرى وتكتب أيضا سقطراء أو سقطرة أو سوقطرةء هى أرخبيل يمني مكون من أريع جزر على المحيط الهندي قبالة 
سواحل القرن الأفريقي (330كم جنوب شبه الجزيرة العربية[1]. إن انعزال الجزيرة الطويل عن أفريقيا وشيه الجزير: 
العريية قد خلّف مستوى قريد وغير مألوف من الاستيطان الحيوي على الجزيرق وكتلك قي المستوى الاجتماعي لسكان 
الجزيره 





أصبح لدينا عنوان وتفاصيل ضمن الصفحة ونأتي لتعلم الخصائص الخاصة بالنصوص والعناوين. 


خاصية الاتجاه (دم1اعع011) 
من التطبيق الخاص بنا نشاهد ان العنوان والنص بدأ اتجاهه من اليسار ومن هنا يأتي دور خاصية الاتجاه 0116010 لتحديد اتجاه النصوص نقوم 
بعمل الخاصية لنص أعلاه وبإمكاننا وضع الخاصية في عدة ديفات حسب الحاجة هنا نضع الخاصية في كلاس الديف الخاص بالنص (6©50)) ونختار 
القيمة 718176 والتي تعني اتجاه النص من اليمين الى اليسار كما في الصورة: 
1 1ه 2 . 
م0 8 5 : طع 13م 


#10 55133 ج15 : ععمنعوط 
213131 : 1531ل 1 


: 1ت 1 طاص دع 841 
عام > 
| / 
11م ممم لحا ([212124. 


. 05255311237+ + 





كما تلاحظ أعلاه هناك عدة قيم لخاصية الاتجاه وما يهمنا هنا هي القيمتين (107) وتعني من اليسار إلى اليمين والقيمة (741) وتعني من اليمين إلى 
اليسار وهي الاكثر استخداما في المواقع العربية. نقوم باختيار القيمة 711 .وستكون النتيجة بعد الحفظ كالتالي: 


1 


جع اع داكن اللاعازيات د 


جزيرة سعطرى جمال الطبيعة والسياحة - اليمن 

سقطرى وتكتب أيضا سقطراء أو سقطرة أو سوقطرةء هى أرخبيل يمتى مكون من أريع جزر على المحيط الهندي قبالة 
سواحل القرن الأقريقي 350كم جنوب شبه الجزيرة العريية[1]. إن انعزال الجزيرة الطويل عن أقريعيا ويه الجزيرة 
لعريية قد خلّق مستوى قريد وغير مألوق من الاستيطان الحيوي على الجزيرةء وكتلك قي المستوى الاجتماعي لسكان 
الجزيرة 


081١|: 00967 0 101100‏ اا 
الوا سد أع .وام حاعع10]0©1 :الهمصع 2 772755202 2:00967 ع ا||ا08/ا 





من الصورة أعلاه نرى أن النص مع العنوان اتجه إلى اليمين إلى اليسار. نقوم الان بإضافة خاصيات أخرى لجعل العنوان والنص يبدوان بالشكل 
المطلوب. 


خاصية الإزاحة رعه22001) 
هي خاصية هامة بالنسبة للنصوص وتعمل على عمل مسافة بين المحتوى (النص) وأطراف الديف الذي يكون فيه النص نفسه لاحظ الشكل للتوضيح: 


010// مااع 





باعتبار ان الديف الخاص بالنص يحمل اللون الرمادي وان النص في الديف يجب ان تكون بينه وبين اطراف الديف مسافة كما هو موضج باللون 
الاصفر هذا مانعني بع29200312 . 


نقوم بتطبيق الخاصية على الديف الخاص بالعنوان والديف الخاص بالنص وعمل مسافة من الأعلى واليمين والاسفل واليسار. وبوضع الخاصية في 
ملف الووح. 5071 سيكون بالشكل التالي: 





6 . 21212 1 

خض عتم عتررة : 23 1 مهم لاك 
0 51 

52 

5-38 . 055114 

م3 م3 نم3 : 2 0631هم 54 
ْ ك5 


كما تلاحظ أعلاه أعطينا قيمة ” بيكسل للنصوص (العنوان - التفاصيل ) في الكلاسات الخاصة بهم. ويمكن تعديل القيمة بحسب الحاجة بعد الحفظ نلاحظ 
التغيير التالي بالنسبة للمسافة بين جوانب النصوص: 


11152 


دورة المواقع والإعلام الإلكتروني 


حزيرة سقطرى جمال الطبيعة والسياحة - اليمن 

سقطرى وتكتب أيضا سقطراء أو سقطرة أو سوقطرةء هي أرخبيل يمني مكون من أريع جزر على المحيط الهندي قبالة 
سواحل القرن الأفريقي 350كم جنوب شبه الجزيرة العربية[1]. إن انعزال الجزيرة الطويل عن أقريقيا وشبه الجزيرة 
العريية قد خلّقف مستوى قريد وغير مألوق من الاستيطان الحيوي على الجزيرةء وكتلك في المستوى الاجتماعي لسكان 
الجزيرة 





081١: 00967 0 0‏ اا 
اتا ساد أع .وام داعع10]0©1 :اتهمطع 2 772755202 2:00967 ع ||ا08/ا 


خاصية ( اللون - الحجم - اسم الخط - أخرى ) 


سنضع هنا خصائص عدة مجتمعة كوني أراها خواص مجتمعة دائما : 


- خاصية ال::010» : تحدد هذه الخاصية لون الخط ويعطى كود أو اسم اللون كما تعلمنا مسبقا. 

- خاصية »2651م : من خلالها نعطي قيمة لحجم النص سواء بالبكسل أو النسبة. 

- خاصية اسم الخط 1:1119ج]-10116 : ومن هنا نحدد اسم الخط المناسب للنص. 

- خاصية سمك الخط 10111-77151:6 : من هذه الخاصية نحدد سمك الخط سواء وتأخذ قيمة سواء نحيف او متين او نحدد قيمة بالبكسل ايضا. 


نقوم بعمل الخواص السابقة كاملة وتطبيقها على العنوان ونضع الكود في كلاس العنوان (116)) في ملف وو5)7916.0 كما في الصورة التالية: 


21211 . 
عتورة قورت عتررت : 0311م هجو 
8*6 4 : عملامع 
5211 ,11125 20 ""تلتققتم 1 1127 13170325" : 7ز 1 قناتة 191115-12 
:12-0111-5122 
:1ه : تاق 101112-51 
/ 





لاحظ في الكود أعلاه وضعنا خصائص كلاس العنوان في السطر ١ه‏ تم عمل خاصية اللون وحددنا الكود للون المراد عمله. في السطر 7ه حددنا اسم 
الخط الذي نريده والمعروف ب1+01212211 1169 5 في حالة عدم وجود هذا الخط سيقوم بتعيين الخط الذي بعد الفاصلة وهكذا. في السطر مه 
حددنا خاصية حجم النص وعينا القيمة ١١‏ بكسل. في السطر ؛ ه استخدمنا خاصية سمك الخط وحددنا 7010 وهي قيمة لتعريض النص وهناك قيم 
أخرى مثل «رو[سعء أو 122112 يمكنك تجريب القيم للخصائص السابقة. 

بعد التطبيق والحفظ للتغييرات ستظهر لنا النتيجة التالية : 


عع عاك االازنات” 


جزيرة سقطرى جمال الطبيعة والسياحة - اليمن 
سقطرى وتكتب أيضا سقطراء أو سقطرة أو سوقطرةء هي أرخبيل يمتى مكون من أريع جزر على المحيط الهندي قبالة 
سواحل القرن الأفريقي 350كم جنوب شبه الجزيرة العربية[1]. إن انعزال الجزيرة الطويل عن أفريقيا وشبه الجزيرة 





خاصية الظل (5120011 )ع1 ) 


إمكانية إضافة ميزات أخرى للنص ومنها الظل ويمكن إضافتها بالخاصية 166-5118001 وسنضيفها في التطبيق السابق كالتالي : 


1 212 .. 
32 3222 م3 عدوة : 0032هم 
)4*5 :عم1امع 
: 55111 ,121710235 .ص "التقسضات 8 ك1 12171025" : 117 لانت 103111-12 
2 كه : 2552 101112-53 
قل1صط : 1ت 121-751 
:م2 عتدنا نانانال : اممشطع -عجردع 
/ 





كما في الكود أعلاه أعطينا كلاس العنوان خاصية الظل في السطر ده أعطينا اللون للظل وهو بالرمز السابق (اللون الاسود) والقيمة الاولى صفر 
بكسل للظل عموديا و؟ بكسل للظل بالاتجاه الافقي. 


01 0 00967 :|08 اا 
الا أ0.0أم تاعع10]0©1 :اتلهمطع ‏ 772755202 2:00967 ع ||8 ١/0‏ 





بعد التطبيق والحفظ للتغيرات ستكون النتيجة كالتالي: 


عع ا ل داك العارياا 


| 


جزيرة سقطرى جمال الطبيعة والسياحة - اليمن 

سقطرى وتكتب أيضا سقطراء أو سقطرة أو سوقطرة هي أرخبيل يمنى مكون من أربع جزر على المحيط الهندي قبالة 
سواحل القرن الأقريقي 350كم حنوب شبه الجزيرة العربية[1]. إن اتعزال الجزيرة الطويل عن أقريقيا وشيه الجزيرة 
العريية قد خلّف مستوى قريد وغير مألوف من الاستيطان الحيوي على الجزيرق وكذلك قي المستوى الاجتماعي لسكان 
الجزيرة 





ننتقل لعمل الخواص المناسبة للتفاصيل في كلاس (19زه164) في ملف وو7916.0]و كالتالي: 


رك 


111 . 
0 3 عتصرةت عتمت : 1 مقن 
+53115-55111 5 ,7521125 , قنالةنائلت 1 : 77ل هلاقت 101115-12 
2 1 : 2552 51--120111 
/ 


- 
5 
0 


5” 


زغ) ارش 





كما في الكود اعلاه في السطر 9ه خاصية المسافة بين النص والديف أو المحتوى واطراف الصندوق وحددنا لجميع الاتجاهات مسافة بمقدار “"بكسل. 
في السطر "٠‏ وضعنا خاصية اسم الخط او نوعه وحددنا (21201112)) وهو اكثر الخطوط شهرة وتوفر في جميع المتصفحات. في السطر "١‏ تم تعيين 
حجم الخط وتحديد ؟١‏ بكسل. 


وبعد التطبيق والحفظ ستكون النتيجة كالتالي: 


16 


حعا ات ع تان نيالك 


. ل 
جزيرة سقطرى جمال الطبيعة والسياحة - اليمن 
سقطرى وتكتب أيضا سقطراء أو سقطرة أو سوقطرة: هى أرخبيل يمنى مكون من أربع جزر على المحيط الهندي 
قبالة سواحل القرن الأفريقى 5350م جنوب شبه الجزيرة العربية[1]. إن اتعزال الجزيزة الطويل عن افزيقيا وشبه 
الجزيرة العربية قد خلف مستوى فريد وغير مالوف من الاستيطان الحيوي على الحزيرة: وكذلك في المستوى 
الاجتماعىي لسكان الحزيرة 








081١: 00967 0 0‏ اا 
اتا ساد أع0.0أم داعع10]0©1 :اتهمطع 2 772755202 2:00967 ع ||ا08/ا 


خصائص الصورة 


ننتقل لعمل خصائص مناسبة للصورة في الصفحة التي نطبق عليها ونحدد القيم المناسبة للخواص التي سنستخدمها. في البداية نختار الصورة المناسبة 
ونضعها في مجلد خاص ونسميه مثلا: ع18:ؤ ضمن المجلدات الخاصة بالتطبيق كما في الصورة. 





اممغطيوع مما 6 عد 12 10 
71 12الاء مضنا أأبن | لا عحصصعطت) 0-7 2-3 
8 مد د ]عام عاك 5 ؟عاعام] عار 2 
ك.ع5/1 هه ١‏ 
أمع لصبعهن] أععطك عابود وماموءده ١‏ 
١ 1,01 8‏ 


لدينا صورة واسمها (عم[.7626111) وضعناها في المجلد ع102 . ننتقل الان الى الديف الخاص بالصورة ونضع كود الصورة. كما في الشكل التالي: 


5-7172 15ت 0311 
</ر "2.2 11 تع “روهس1 "”عمع 5 1210 > 
031 ره 





في السطر 7” أضفنا كود الصورة وحددنا مكانها من المجلد الذي انشأناه والصورة التي نريد وضعها. وبعد التطبيق والحفظ ستكون النتيجة كما في 
الشكل التالي: 


1/1 7 7 


ععا كت ل لك ااا" 


سقطرى وتكنب أيضا سقطراء أو 


قبالة سواحل القرن الأقريقى 350كم + 
الحزيرة العربية قد خلف مستوى فريد و 
الاجتماعي لسكان الحزيرة 





نلاحظ كما في الشكل أعلاه أن الصورة تم ظهورها بشكل طبيعي ولأن الصورة تحمل حجم ومقاسات معينه لابد من وضع خصائص للصورة ضمن الديف 
التي تحويه علما أن الديف التي فيه الصورة لا يتدخل نهائيا في حجمها. والمطلوب عمله الان وضع كلاس معين خاص بالصورة نضع فيه المقاسات 
والخصائص التي نريدها. 


١/08 ||: 00967 0 0‏ 
الاكدا أ0.0أم داعع0©1م1 :اأهمع ‏ 772755202 2:00967 || ١/08‏ 





نقوم الان بعمل كلاس للصورة في ملف و5و5]916.0 ونسميه مثلا 12151 . ونضع فيه خاصية المقاسات أولا وسيكون بالشكل التالي : 


17131 . 
112 : عاطق 21521 
مم91 1 : طع 3 71 





كما في الكود أعلاه حددنا الطول ١٠١١‏ بكسل والعرض ١٠١‏ بكسل ويمكنك عمل المقاسات التي تريدها. لكن هنا ملاحظة مستقبلا يمكنك عمل قيمة 
06 للطول لتظهر الصورة بشكلها الطبيعي وان لا تكون ممطوطة حسب مقاس معين. 


نأتي الان لربط الكلاس بالصورة في ملف 12216:<.11311 كما في الشكل التالي: 


"5-1901 15ت 2031135 
</ 5-7”3173331 135 237 3 . 2121تتتت7 “1 1 "عع 5 1013 > 
01 “ره 


>01 





كما تلاحظ في السطر 7” تم ربط الصورة بالكلاس الخاص بها (182151). بعد التطبيق والحفظ للتغييرات سيكون لدينا الشكل التالي: 


1/1 


دورة المواقع والإعلام الإلكتروني 


ل ل 
جزيرة سقطرى جمال الطبيعة والسياحه - اليمن 
سقطرى وتكتب أيضا سقطراء أو سقطرة أو سوقطرة: هى أرخبيل يمتى مكون من أربع جزر على المحيط الهتدي 
قبالة سواحل القرن الأفزيقى 350كم جنوب شبه الجزيرة العربية[1]. إن اتعزال الجزيرة الطويل عن أفريقيا وشبه 
الحزيرة العربية قد خلف مستوى فزيد وغير مالوف من الاستيطان الحيوي على الحزيرة: وكذلك في المستوى 
الاجتماعىي لسكان الجزيرة 





خاصية حدة الحواف (801:07-120105) 


كما تلاحظ الصورة ظهرت زواياها حادة ولأكثر تنسيقا ومظهرا نقوم بعمل تحديد لزوايا الصورة وجعلها ملتوية نوعا ما. نقوم بعمل الكود التالي: 


+ 13331 . 
:نا 11 : ان 151 
عت م9 1 : طعت 1 
52 عتج5 ععند5 عنج5 : 1115 هع لع م عمط 
7م عتمم مم 2 :111 روطع قن 





لاحظ في السطر 58 قمنا بعمل خاصية الحواف وحددنا مقدار التواء الزوايا " بكسل لجميع الزوايا. في السطر 59 اضفنا كود لعمل ازاحة او بعد 
للصورة من كما في الشكل اعلاه من الاعلى " بكسل اليمين " بكسل الاسفل 5 بكسل اليسار ” بكسل. 


01 0 00967 :|08 اا 
كسد أع .وام داعع10]0©1 :الهمطع 2 772755202 2:00967 ع ا||ا08/ا 





وقبل رؤية شكل الصفحة سنضيف بعض الاكواد في الديف الخاص بالصورة والديف الخاص بالنص كما في الشكل التالي : 


81-11 . 
: 191182 : طاءاكت 1 
22 5 لمك :2ك :1711 قن 
0 


1 2521 . 
252ل 58 :لطاع 4ك 71 
721 #4 1313ه5 عجم1 :عع عمط 
2131312 : 1-312 1 
:251 ت قات 1 ممع 1م 
2 خم عتصرك م85 : 11 بقوع قد 


1 





لاحظ في السطر 9” اضفنا خاصية 11 وهي خاصية كما ذكرنا سابقًا تساعد على عمل ازاحة للديف او الصور لأي اتجاه نحدده وهنا حددنا ازاحة 
للديف او الصندوق الذي يحوي الصورة من أعلى بمقدار " بكسل ومن اليمين بمقدار ؟ بكسل ومن الاسفل بمقدار " بكسل ومن اليسار " بكسل. 


في السطر 417 وضعنا خاصية الازاحة للديف التابع للنص كامل وبقيم مختلفة كما تلاحظ. بعد التطبيق والحفظ سيكون الموقع بالشكل التالي: 


1/1 


حيتت مدال العارماتد 


١ /‏ بل لل 
جزيرة سقطرى جمال الطبيعة والسياحه - اليمن 
سقطرى وتكتب أيضا سقطراء أو سقطرة أو سوقطرة. هي أرخبيل يمني مكون من أربع جزر على المحيط الهندي 
قبالة سواحل القرن الأقريقى 5350م جتوب شبه الجزيرة العربية[1]. إن اتعزال الجزيرة الطويل عن أفريقيا وشبه 
الجزيرة العربية قد خلف مسقوى فريد وغير مألوف من الأستيطان العيوي على العزيرقء وكذلك في المستوى 
الاجتماعي لسكات الجزيرة 








كما تلاحظ الشكل الناتج من التعديلات والاكواد المضافة يمكنك التعديل في القيم ورؤية الفرق وكيفية نتائجها. إضافة رابط ضمن النص وخصائصه : 
يمكننا إضافة رابط ضمن النص له خواصه المعينة نقوم بعمل رابط (تفاصل أكثر ..) ضمن النص او آخره كما في الشكل التالي : 


وغخبر مألوق هن الاستيطان الحبوى على الحزيرة: وكذلات قي لوفو الاجتفاعي لسكثان الصويوة 
<3/>. . تقاصيل أكثرت"#"-2عجط د»> 


11 رع 


011 0 00967 :081 اا 
اناس أع .وام داعع10]0©1 :اتهمصع ‏ 772755202 2:00967 ع ||ا08/ا 








كما تلاحظ أعلاه أضفنا رابط في نهاية النص لقراءة المزيد حول الموضوع ولم نحدد الاتجاه بعد فقط موقتا وضعنا علمة هاش (#) في الرابط وسيكون 
شكله في التطبيق كالتالي: 


1/7 ا 


ع ا لت ل الات 


جزيرة سفطرى جمال الطبيعة والسياحة - اليمن 


سقطرى وتكتب أيضا سقطراء أو سقطرة أو سوقطرة: هى أرخبيل يمتى مكون من أربع جزر على المحيظ الهندي 
قبالة سواحل القرن الأفريقى 0ا35كم جنوب شبه الجزيرة العربية[1]. إن اتعزال الجزيرة الطويل عن افريقيا وشبه 
الحزيرة العربية قد خلف مستوى فريد وغير مالوف من الاستيطان الحيوي على الحزيرة: وكذلك فى المستوىك 
الاجتماعي لسكان الحزيرة تقاصيا أكثر.. 





لاحظ وجود الرابط في نهاية النص (تفاصيل أكثر..) ظهر الرابط باللون الازرق وهو اللون الافتراضي للروابط. نرد أن نضع بعض الميزات للرابط 
ومنها: عند وضع مؤشر الفأرة يتم تحول اللون من الازرق الى الأحمر أيضا نريد التعرف على خاصية ازالة الخط من اسفل الرابط في حالة اردنا ذلك او 
انه يبقى في وضعه العادي ويختفي عند التأشير والعكس. 


الطريقة : طبعا هنا لا نقوم بعمل كلاس جديد للرابط ولكن نقوم بإضافة كلاس فرعي لكلاس التفاصيل وهنا تأتي حرفية ودقة لغة ال055) ويعني ان نقوم 
بعمل كود يخبر المتصفح بأن يقوم بعمل لون محدد لرابط داخل الكلاس الفلاني. 


لاحظ أن الرابط موجود داخل الديف (1642119) لذلك الكلاس الذي سننشئه سيكون متفرع من هذا الديف. في البداية نقوم بعمل لون محدد للرابط وليكن 
الاصفر او أي لون كمثال سيكون الكود كالشكل التالي: 
51 1252115 . 


915 زاك تعتمامع 
+ خخ 2757115 : الت 1 دع مع مهن عيرم 





لاحظ أعلاه اخذنا اسم الكلاس (01648119) ثم وضعنا اسم الرابط (2) وهو اسم عام لأي رابط في اي كلاس. وتعني تعبيريا الروابط التي في الكلاس 
5 . في السطر 77 قمنا بتحديد لون معين لأي رابط داخل الديف أعلاه. في السطر 74 اضفنا خاصية جديدة وهي خاصية الخطوط التي تحت 
الروابط 166-0601:210 وتعني الخط تحت النص او الرابط وأعطيناها القيمة ©2026 والتي تعني لاء والتي تعني لا تضع خط تحت الرابط وسيكون 
الشكل بعد التطبيق والحفظ كالتالي: 


جزيرة سقطرى جمال الطبيعة والسياحة - اليمن 


سقطرف وتنتب: دضلا سقطراء أ سقطرة أ سوقطرة:. شي أرخبيل يهتى هكون من أربع جزر على المحيط الهنديه 
قبالة سواحل القرن الأفريقي ناكم جنوي شبه العزيرة العربية[1]. إن اتعزاك الجزيرة الطويل عن أقريقيا وشبه 
الجزيرة العربية قد خلف مسعوى فريد وغير مألوف من الأاسقيطانته الحيوي على الحزيرة: وكذلك في المسعوفى 
الاجتماعي. لسكات الجزيرة تفاصيل اثثر.. 





كما لاحظت أعلاه رابط (تفاصيل أكثر..) تم تغيير لونه بالإضافة الى ازالة الخط الذي كان تحته. ولكن عند التأشير عليه لا يحدث اي شي. سنقوم الان 
بعمل لون محدد واضافة خط تحت تحت الرابط في حالة التأشير على الرابط بالماوس. والحل نقوم بعمل كلاس فرعي آخر بنفس الطريقة السابقة والتي تخبر 
المتصفح بأن اللينك في الديف الفلاني عند التأشير عليه ظهر الخصائص الفلانية والكود سيكون كما بالشكل التالي: 
1ع تو :3 15 1553ل . 
: نأم* #4 بعم1امع 


11711531131715 : 51 1 عا دمعمعع23- جاعرم ]1 
1 
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كما تلاحظ أعلاه في السطر 77 اضفنا الكلاس الفرعي 2:11:01 ضمن الكلاس 06423119 والتي تعني الروابط في الديف 1662119 عند التأشير عليها. 
في السطر 7١‏ أضفنا اللون الذي نريده. في السطر 79 اضفنا خاصية الخط تحت الرابط وهو الظهور للخط وأعطيناه القيمة 2016:1106 وتعني الخط 
السفلي. جرب هناك قيم أخرى مثل «اع1126-611:011 وغيرها يمكنك تجربتها خلال برنامج الترع؟1(1:©211219625. 


بعد التطبيق والحفظ سيكون الشكل للرابط والتأشير عليه كما في الصورة : 


00 سقطرى جمال الطبيعة والسياحة - اليمن 


سقطرى وتكتب أيضا سقطراء أو سقطرة أو سوقطرة. قي أرخبيل يمني مكون من أربع جزر على المحيط العندي 
قبالة و القرن الأفريقي لاددتكخمر #تقلايه شباه الجزيرة الحعربية[1]. إن اتعزال الجزيرة الطهيل عن أقريقيا وشبه 
الحزيرة العربية قد خلف مستوى فريد وغير مألوف من الأسقيطان اللحيوي على الحزيرة: وكدلك فقي المسنوىك 
الاجتماعي لسكات الجزيرة تقاصل, أكثر.. 





كما تلاحظ أعلاه يتغير اللون عند التأشير على الرابط. 


خاصية التعليق (1::1:2دامء) 

في برمجة المواقع تحتاج أحيانا بعد أو أثناء البرمجة وانشاء المواقع لعمل تعديلات وعودة للاكواد السابقة ومن باب الترتيب والتوثيق يمكنك إضافة 
تعليق ضمن الاكواد تشرح لم هذا الكود أو ذاك دون أن يؤثر على الكود الحقيقي أي أنه لا يحسب كود لأنه تعليق فقط. سنقوم بعمل تعليق كمثال لملف 
لممغط.عع لد وملف الووع.»5)916 . 


كما في الصورة التالية : 


0111185 هتا القائهسكةك‎  »/01< 


:"2115م ومع "حو مم زعم 
<"طبجردع "دعو وج زم 





أضفنا تعليق ضمن ملف 11:16:.1:011 والتعليق يضاف ما بين الحواصر أعلاه. 
ايضا الصورة التالية: 


+3 15-5513137 . 
915 نك : عرم 11رمع 
+ 52:25 1 عا دعمع من طيرمع 





كما في الصورة اعلاه نضع اي تعليق داخل الحاصرتين أو الرمزين أعلاه بنفس التنسيق وبأي تعليق تريده. 
ملئ صفحة الموقع 


قبل البدء بتطبيق بالخواص التالية سنقوم بمليء الصفحة بنفس النص والصورة الموجودة ( نسخ ولصق ). كما في الصورة التالية: 


١/08 ||: 00967 0 0‏ 
الاكدا أ0.0أم داعع0©1م1 :اأهمع ‏ 772755202 2:00967 || ١/08‏ 








<" جرم عا ممع "5-2 55 1ه 201177 
لسريس دس بيب -:-: ١-‏ اله 
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ن اربع جرّر على المفحيط الهتدى قبالةك صسواحل القرن الاقريقي لاد كم 
عددب حبك الصدمرة الصعويية الألد إن اتخواك الجوفوة الطوفق خن أموفهها 
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سنقوم بنسخ المحتوى مرتين ليصيح مكرر ” مرات ويمكنك في تطبيقك عمل بيانات أخرى افتراضية وسيصبح الموقع كما في الشكل التالي: 


12 


حيات عت عل داك إناكاري افك 


نض © | اى لاا 


5 1 اق 5 ' 5 
جزيرة سقطرى جمال الطبيعه والسياحةه - اليمن 
سقطريك وتشتب: لضا سقطراء أو سقطرة أ سوقطرة. شي أرخبيل يمنى همكون من أربع ججزر على المحيط الهندك 
قبالة سواحل القرن الأفريقي 350كم جتوب شبه الجزيرة العربية[1]. إن اتعزال الجزيرة الطويل عن أفريقيا وشبه 
الحزيرة العربية قد خلف مسعوى فريد فيز مألوف من الأسقيطات الحبيوي على الحجزيرة. وتذلك قي المسهوعف 
الاجتماعي. لسكاتن العزيرة تفاصبيل اكثر.. 


جزيرة سقطرى جمال الطبيعة والسباحة - البمن 


سقطرف وتشتقبه أليضًا سقطراء أ سقطرة أ سوقطرة: قشي أرخبيل يمني هكون من أربع جزر على المحيط الهندي 
قبالة سواحل القرن الأفريقي (3500كم جتهب شبه الحزيرة العربية[1]. إن اتعزالكء الحزيرة الطويل عن أقريقيا وشبه 
الحزيرة وح اوم ا وود الأسقيطات الحميوي على الحزيرةء وكخدلك. قي الممسعوفت 
الاجتهاعي لسكاته الجزيرة تفاصيل اثثر 


جزيرة سقطرى جمال الطبيعة والسياحة - اليمن 


سقطرع» وتثقبه لضا سقطراء أو سنقطرة أ سوقطرة: قي أرخبيل يمنى هكون من أربع جزر على المعيط الهندي 
قبالة سواجل القرنث الأفريقى, لادتخهمر جتتاب: شبك العزيرة العربية[1]. إن اتعزاك العزيرة الطويل عن أقريقيا وشبه 
التحزيرة العربية قد خلف الس ةوق قريد فيز مألوف سن الأسقيطات الحيوي على الحجزيرة. وكذلك قي المسهوف 
الاجتماعي. لسكان العزيرة تفاصبل اثثر.. 





لاحظ كيف قمنا بنسخ كود معين من بداية الديف الخاص بالنص والصور داخل ديف المحتوى يجب ان تتنبه هنا الى كيفية النسخة ومكان النسخ للديفات 
بسع 


وعدم إخراج ديف معين عن الديف العام. 


0 00967 :ع ا|ا8 0لا 
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موف لوكت 10 





القوائم (115اء1/1) 

تعتبر القوائم من أهم العناصر في تكوين المواقع الالكترونية من حيث تصميم الشكل والمحتوى. فالقائمة تعتبر خارطة الموقع بالنسبة للمتصفح وعن 
طريقها يصل المتصفح للموقع لما يريده داخل أي موقع فدائما نركز على تصميم القائمة شكلا ومحتوى. تعلمنا مسبقا كيفية عمل ()115) بمعني قائمة. 
هنا القائمة التي نريد عملها وتعلمها ليست كالتالي تعلمناها مسبقا ولكنها منبثقة منها ومطورة بشكل أكبر. 


مثال للقائمة التي تعلمناها مسبفقا: 


2111 
<11 رعجة/ر> جتنيديه" ا" 12 قعط وع< 241313 
<11 رعجة رأونيقض< "4" 12 وعط وع< 13> 


<11 رعدة رع سبق" 4#"ع-2 وعط وع:< 13> 


> 111 





لاحظ القائمة أعلاه. مشابهة للقائمة السابقة لكن أضفنا لهنا هنا كود الرابط. سنقوم بعمل قائمة جميلة وبمظهر رائع لموقعنا وسنستخدم الكود أعلاه 
لبناء قائمة احترافية. وسنبدأ بالخطوات أول بأولء في البداية ننتقل للديف الخاص بالقائمة (26211) في التطبيق الخاص بنا. 


نقوم بعمل قائمة فيها العناصر (الرئيسية مشاريعنا - أخبار - مشاركات - المرئيات - حول المؤسسة - اتصل بنا ). وسيكون شكلها كالتالي: 


<" تاطعدم”-1555ج 13> 

>11 

<3<>,/11ة /» الرئيسية<"#"-+-12عغط 11> 
<11 رعجة/ر»مشا ربتعتاح" 141" 2عغعط 13> 
<13 رعدة /» أخبا رح" #" معط 4113245>» 

<11 “رهج /ر»>مشاركاته" 341" 2ععط 11> 
<11رعدة/ة> المرئتباتهج"4"+<27ععط و24 11> 
<11 رعق ر» حول المؤسسة<"41"-<2عغعط 25 11> 
<11رعدة “> اتصل نتاجح"#" + 12عغعط و24 11> 
01 ره 
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قمنا بعمل قائمة في الديف الخاص بها في الموقع. بعد التطبيق والحفظ سيكون شكل المواقع كالتالي: 






جزيرة سقطرى جمال الطبيعة والسياحة - اليمن 


سقطرى وتكتب أيضا سقطراء أو سقطرة أو سوقطرة: قي أرخبيل يمني مكون من أربع جزر على المحيط العندي 
قبالة سواجل القرن الأقرية يقي (351كم جنوب شبه العزيرة العربية[1]. إن اتعزاك ااعزيرة الطويل عن أفريقيا وشبه 
الحزيرة العربية قد خلف مستوى فريد وغير مألوف من الاستيطان التحيوي: على الحزيرةء وتذلك في المسموف 





كما تشاهد أعلاه تم إضافة القائمة في الجهة اليسرى للديف ومعظم محتوى القائمة ذهب للأسفل. قبل أي تعديل على القائمة وإضافة ميزات لها نقوم أولا 
بعمل (101) للقائمة مشابه للكلاس كي نقوم بعمل جميع الخصائص للقائمة فيه وقد تعلمنا مسبقا ال10 .نقوم بإضافة (226211) من نوع (10) بجانب 
الكلاس (12261113) الذي أنشأناه سابقا سنستخدم الكلاس للخواص العامة وال(10) لخواص القائمة وسيكون بالشكل التالي: 


+111 تتنعهسرة 
1 101 1012 . 
322 : نزت 2 -33131 12 هنا 
122 2933 :عع عمط 
تنا نا 8 : 771361 
تجن ك : طن 121 
+ #222 :نعه 1م - ل ستامع وعاعدط 


ل 0 00967 :ع |08 
لعلله . اكه وت1 160و «اإطيوة 2 00967 :2 ع اا8 ١/0‏ 








قمنا بعمل ال(10) الخاص بالقائمة وأسميناه »2 وإضافة رمز القائمة (01) المتفرع والتي تعني تعبيريا (القائمة الموجودة في الاي دي الفلاني ) كما 
في السطر ؟7.سنضيف أيضا خاصية الغاء علامة القائمة او النقطة عند كل عنصر عبر خاصية (1156-54916-6976). وسيكون الكود بالشكل التالي: 


111 لتمطعترة# 
+ : 8 نمت : موياع -2 171 1355-5 


كما تلاحظ في سطر 77 أضفنا خاصية نوع الاستايل للقائمة (©عم1156-56916-69) واخترنا القيمة ©20 والتي تعني لا أي بدون ستايل وسيتم الغاء نقاط 
العناصر للقائمة كما في الصورة التالية: 





جزيرة سقطرى جمال الطبيعة والسياحة - اليمن 


سقطرى وتكتب أيضا سقطراء أو سقطرة أو سوقطرة: هى أرخبيل يمني مكون من أربع جزر على المحيط الهندي 


قمللق سماه! ‏ القدذة الأفشديقه ‏ لأك_تكه جني يمه الجحنييه للصنسيةق11 | . اند اقصة للد التجحنميه الطليا ت... اشدية٠ا‏ عت ٠ه‏ 





لاحظ القائمة والنقاط التي كانت عليها تم الغائها. 


ننشأ الان آي دي متفرع من السابق خاص بعناصر القائمة (11) وفيها سنقوم بعمل خاصية جديدة وهي (1150193) وهذه الخاصية تقوم بعمل عرض 
القائمة ولها قيم عده منها أفقية :11م والتي سنضيفها الان لعرض القائمة بشكل أفقي. هنا شكل بياني سنستعين به لشرح هذه النقطة الهامة: 





- اللون الأخضر: هذا ليس له دخل بالقائمة وإنما هو صندوق او ديف يحمل أي دي أو كلاس ليستمد منها خصائصه من الوان وخطوط وما إلى 
ذلك وهنا في مثالنا هو نفس الديف الذي كنا كتبنا بداخله في بداية التطبيق (هنا القائمة). 

- اللون الرمادي: هي القائمة نفسها ([3) ويمكن التعبير عنها كأنها سلسلة. 

- ._اللون الأصفر: وهي عناصر القائمة الرمادية ويمكن التعبير عنها بعناصر السلسلة. 


الان سنقوم بعمل الاي دي الذي سيحمل خصائص القائمة كليا الموجودة ضمن الديف الذي يحمل الاي دي 22©2211. كما في الكود التالي: 


111 نتدعترة 
+ صن : موريع -82 1155-5211 
+ 13 111 تتدعهرة 
+ 121122 : 13357ج5 213 





لاحظ السطر ؛ ؟ اضفنا (10) وهي (11) متفرع من الاي دي (11) والاي دي (7261211). والتي تعني تعبيريا (العناصر في القائمة في الاي دي الفلاني ). 
وبعد التطبيق سيظهر الموقع بالشكل التالي: 


يان ع ع تان اناعازماتك 


الرئيسية متماريحنا أخبار ماركات المرئيات حول المؤسسة اتصل يتا 


081١|: 00967 0 111‏ ا/ا 
ا أع .هام داعع10]0©1 :اتلهمصع 2 772755202 2:00967 ع ||8 ١/0‏ 









لاحظ التغيير تم جعل عناصر القائمة أفقيا. نلاحظ أن القائمة أتت من اليسار لذا سنقوم بعمل خاصية الاتجاه للقائمة بأكملها. سنقوم بعمل خاصية الاتجاه 
في كلاس (1261101.) كما في الشكل: 


112111 . 
322 : نزت ع -33 231 قل 
: 55113 هعم1 24933 :عدم نل عمط 
نالا : طعا ك1 
ناك : عاطت 1121 
22 # : عدم امع -7نامعدوعاء مط 
: 2:22512ه1جععمع 01 





لاحظ في سطر "” تم إضافة الخاصية :016410 لكلاس القائمة وسيكون شكل الموقع بعد التطبيق والحفظ كالتالي: 


دورة المواقع والإعلام الإلكتروني 


الرئيسية مشاريعتا أخبار مشاركات المرئيات حول المؤسسة اتصل يتا 





كما تلاحظ تم تغيير اتجاه القائمة من اليمين الى اليسار لأنها ضمن الديف (القائمة) التي يستمد خصائصه من الكلاس (11261211). 


الخطوة التالية سنقوم بإضافة خواص تعلمناها مسبقا وهي (خاصية مكان الخط (ازالة الخط من اسفل العناصر) - خاصية حجم الخط - خاصية تغيير 
لون الخط لروابط القائمة - تعيين الخط المناسب أيضا وحجمه ). 


ملاحظة (تذكر أن عناصر القائمة هي روابط وقد تعلمنا مسبقا التعامل مع الرابط لتغيير خصائصه عبر كلاس او اي دي متفرع من الديف الذي يحتويه 
وهو ما سنفعله الان في تعيين خصائص عناصر القائمة). 


لاحظ الكود أدناه أو الشكل: 


13 111 لتتمعسة# 

0158135: 12111112 + 

+3 11 111 لتتدمسعس# 
م 1151152 : 1513 عاقعرومع 2ن 
: غ86 #4 : عم1امع 
55211 ,1110125 , "التققتم 1 127 1317325" : 7 1 لناتة ‏ --0111 1 
:552 1 : 55 1090112-51 
182صط : عاطق 1011-51 





في السطر 75 أضفنا الاي دي للروابط المتفرع من عناصر القائمة ضمن المتفرع من القائمة الكلية والمتفرعة من الايدي الاصل او الصندوق نفسه. 


هنا يمكن التعبير بشكل آخر للسطر 75 (كأننا نقول امنح الروابط الموجودة في عناصر القائمة للقائمة الكلية في الصندوق او الايدي 7212101 الاصل هذه 
الخصائص). 


في السطر 0" خاصية الخط ومكانة وضعنا قيمة ©2011 والتي تعني بدون خطء في السطر 5/0 عينا اللون» في السطر "5 تعيين للخط وحددنا الاسم 
للخط المطلوب. في السطر ٠‏ حددنا حجم الخط» في السطر "١‏ حددنا عرض الخط واخترنا قيمة 7010 والتي تعني عريض. 


بعد التطبيق والحفظ سيكون شكل الموقع او التطبيق كالتالي: 


ععات ا لفاك االعازناات 






000 0 00967 :|08 اا 
لا أ .وام داعع10]0©1 :اتهومع 2 772755202 2:00967 ع ||ا08/ا 


كما في الشكل تم عمل التغييرات اللازمة والمحددة مسبقا في الكود. سنقوم الان بتحديد أطراف عناصر القائمة )011 وسنضيف الكود او الخاصية الذي 
تعلمناها سابقا وهو الحواف او الاطراف (170101) كما في الكود التالي: 


54 11 111 تتصسعسة# 
م 1165112 1511نت عدوت 2ل بي 
8610 24 : عمل1امع 
55111 ,م 1171025 , "لتقنام 1 12 1310125" : تت 2 :19111 
122 :5252 51--0111 1 
2513 : 3131 51 - ات 1 
+2 113همه5 228980 :عع نعمط 


لوه 3 


كن كن كز كن 


8 
9 
0 


(ك . 





في السطر ؟” تم اضافة خاصية الحواف او الاطراف وتم تعيين اللون كما هو اعلاه وحددنا نوعه خط عادي والحجم ١‏ بكسل. بعد التطبيق والحفظ 
سيكون شكل الموقع كالتالي: 





القع اهنيع بدا لهدكك اسيك عن لنسة ادبا 
جزيرة سقطرى جمال الطبيعة والسياحة - اليمن | سه 


لاحظ تم تحديد اطراف عناصر القائمة باللون الذي حددنا. نقوم الان بعمل خاصية اخرى تعلمناها مسبقا وهي المسافة بين الرابط او النص وطرف 


العنصر بواسطة الخاصية (ع72001) كما في الكود التالي: 


+2 11 111 لتسعس# 
1215115 :11 قوت 015- بدت 11 
610" # : عم1مع 
525211 111082575 , "التقنتام 1 تات11 13110125" :37 11011ة 1 :10111 
8222 1 : 0111-5125 1 
: قل1صط : عطق 3ع17- ع نت 1 
:2 5511343 980" 2 ب عع عمط 
+ 2ص عتم قم عتمم : 0013 هم 





في السطر 7” عينا قيم /ابكسل لكل المسافات من جميع الاتجاهات. وسيكون شكل القائمة كالتالي: 


دورة المواقع والإعلام الإلكتروني 





لاحظ القائمة وعناصرها زادت المسافة بين النصر وطرفها الخط الملون باللون الاصفر. ولكن هناك ماهو ملفات ايضا تم ازاحة القائمة الى الاسفل خارج 
اطار الديف او صندوق القائمة كما نراه في الصورة اعلاه وهنا سيتبادر الى اذهاننا بعض التعديلات وهي: ( جعل الطول بالنسبة للديف الذي يحوي 
القائمة 45 بكسل حسب احتياجنا - ايضا عمل مسافة بين القائمة وطرف الديف عموديا وافقيا ). وسيتم تطبيق ذلك في الاي دي للقائمة بالنسبة 
للمسافة بينها وبين الصندوق ككل والطول للصندوق الديف الخاص الذي يحوي القائمة («رعدم.) كما في الكود التالي: 


كر 


111 لتتمرعسر# 
27051352 : مصرياع -5 6371 1152-5ل 
122 : 1تعا-13 2031 قل 
: 3131:3322 1721-21 12 قن 
ا 


اس 
اك 
3 
اج 


خر أآخن آخثر خرن رخن 


ابل 





0 0 00967 :|08 اا 
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في السطر 4" جعلنا المساقة بين القائمة وبين طرف الصندوق من أعلى يساوي ؟١‏ بكسل. وجعلنا المسافة بين القائمة والجانب الايمن سالب 9" 
بكسل وهو العكس طبعا اي ان يقترب من الطرف الايمن بمقدار ”" بكسل كما ستلاحظ الفرق بين النتيجة السابقة واللاحقة. 


ل 


25 


1 10211 . 
32 : نومطعا -121 21 قن 
تجتص1 24933 :عدم ل عمط 
81112 : 31 31 
:2 2 : عدم امع - تنام عوعاح قط 
21 : قت اطع 25 01 
522 :311 11531 
0 


9 


3 
الات 
ك 


ككر اطلر كبر 
فل يخ قرم كبر 





في الكود أعلاه وفي الكلاس 7261201 الذي يستمد صندوق القائمة خصائصه منه عدلنا الطول وجعلناه 45 بكسل. وبعد التطبيق والحفظ سيكون شكل 
الموقع كالتالي: 


دورة المواقع والإعلام الإنكتروني 


جزيرة سقطرى جمال الطبيعة والسباحة - اليمن 


سقطرى وتكتب أيضا سقطراء أو سقطرة أو سوقطرة: هي أرخبيل يمنى مكون من أربع جزر على المحيط الهتدي 
قبالة سواجل القزن الأفريقى 3500م جنوب شبه الحزيرة العربية[1], إن اتعزال الحزيرة الطويل عن افزيقيا وشبه 
الجزيرة العربية قد خلف مستوى فريد وغير مألهف من الاسقيطان الحيوي على الحزيزة: وكذلك في المستوى 
الاجتماعىي لسكان الحزيرة تفاصيل اثثر.. 





نقوم بتعديل بسيط على عناصر القائمة على المسافة بين رابط او عنصر القائمة والجانبين الايمن والايسر بدلا من 7 بكسل نضع ١١‏ بكسل. بعد التطبيق 
والحفظ سيكون شكل القائمة كالتالي: 


دورة المواقع والإعلام الإلكتروني 


5 5 
جزيرة سقطرى جمال الطبيعة والسياحة - اليمن 
سقطرى وتكتب أيضا سقطراء أو سقطرة أو سوقطرة: قي أرخبيل يمتى مكون من أربع جزر على المحيط العتدي 
قبالة سواحخل القرن الأفريقى 50 جتوب شبه الحزيرة العربية[1]. إن اتعزال الجزيرة الطويل عن أفريقيا وشبه 
الحزيرة العربية قد خلف مستوى فزيد وغيز مالوف من الاستيطان الحيوي على الحزيرة: وكذلك في المستوى 
الاجتماعي. لسكان الحزيرة تقاصيل اكثر,. الإو .- ةا 


سنقوم الان بإضافة خاصية أخرى تعلمناها مسبقا وهي تحديد حدة الزوايا وسنقوم بتطبيقها الان على روابط عناصر القائمة بحيث ستبدو زوايا غير 
حادة كما في الكود التالي: 








34 1313 111 لتتمطعسسة# 
25115 : كات 1 ع قع مح 005- هده 1 
: نأ #4 :عم1مع 
525211 ,111125 ."لتقتتتم 1 اع 1171525" : 17 1 هلانت 1 --10111 
832 1 : 55 513--1-0111 
3 1صط : اهن 120112-51 
:122 551183 8980 2 بعع عمط 
م8 1 عتم عتصرة 1 عتمم : 153 مهم 
م5 :تمك م5 عدر : 1115 تع عم ل نرومط 
0 


١/081١: 00967 0 0‏ 
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كما تلاحظ في السطر 7" أضفنا خاصية (1:2031015--201:0161) في الاي دي (2 11 111 12261213) لروابط عناصر القائمة بمقدار © بكسل من جميع الزوايا. 
وبعد التطبيق والحفظ سيكون شكل في القائمة في الموقع كالتالي: 


دورة المواقع والإعلام الإلكتروني 


جزيرة سقطرى جمال الطبيعة والسياحة - اليمن 


سقطرف وتشتب: لضا سقطراء أ سقطرة 5 سوقطرة:. شي أرخبيل يمني هكون من أربع زر على الصسحيط القند 
قبالة سواحل القرن الأفريقي 350كم, جنوب شبه الجزيرة العربية[1]. إن اتعزال الجزيرة الطويل عن أفريقيا وشبه 
الحزيرة العربية قد خلف مستوى فريد وغير مألوف من الأسفيطاتن اللحيوي على الجزيرة. وتذلك في المسميف 
الاجتماعي لسكات الحزيرة تفاصيل اثثر.. 





لاحظ كيف تحولت روابط العناصر للقائمة الى زوايا ناعمة او ملتوية. سنقوم الان بتعديل لون الخط والخلفية لكل العناصر من نفس الاي دي الذي عدلنا 
عليه أعلاه سنضع لون للخط أبيض وخلفية برتقالية مع تغيير لون الخط الحواف من برتقالي إلى لون مختلف كما في الكود التالي: 


3 13 111 لتتنعسسرة 
5215115 7 1ت 1 1ق عدت 2-015 ده 1 
#21211 : عم1امع 
:5251211 ,1171525 ,0 "لتققاتم 8 1 1170125" :لقت 1 10111 
552:1 51--0111 1 
513صط : عتطق 21 جات 1 
55113 0881 #4 معرم عمط 
18 عتمم عقصة 1 عم : 2 تدم مهجم 
م5 نم5 :تدرؤ : 1115 مقع -عرم عمط 
: نانا6 انظ : عم1مدع-تقتتامع وعاع قط 
َ 





كما تلاحظ أعلاه قمنا بتعديل اللون في السطر ؟". ولون الحدود أو (601:061) في في السطر 5" حسب اللون اعلاه. أيضا أضفنا كود أو خاصية الخلفية 
في السطر 4 وحددنا اللون الذي نريده وسيكون شكل الموقع بعد التطبيق والحفظ كما في الصورة: 


دورة لع والإعلام الإلكرولتي 


جزيرة سقطرى جمال الطبيعة والسياحة - اليمن 


سقطرع وتقتب: اما سقطراء أ سقطرة أ سوقطرة: شي أرخبيل يعني مكون من أربع جزر على المحيط الهندي 
قبالة سواجل القرن الأقريقي لاددتثهمر قوب شبه العجزيرة العربية [1]. إن اتسزاك الحزيرة الطويل عن أقريقيا #تقمب: 
الحزيرة العربية قد خلف مستوى فريد وغير مألوهف من االأستيطاتن الحيوي على الجزيرة. وتذلك فقي المسموف 
الاجتماعي لسكات الجزيرة تفاصيل اثثر.. 





كما تلاحظ أعلاه تم تغيير لون خلفية روابد العناصر للقائمة أعلاه. سنقوم الان بإاضافة لون لخلفية القائمة ونقصد هنا الديف (2261201) والذي يستمد 
خصائصه من الكلاس (12261311.) كما في الكود التالي: 


0 00967 :ع اا ١/08‏ 


تلوف »لوكت ليا الطيية وا ل ل 00 





1211 . 
ل : نزت 12-2 جوع قل 
م1 4933 :أعرم عمط 
نا نا : ط3 1 
711 2 : عدت 1دع - لتنامع وعاح قط 
251 تلات ادع 011 
52 : 11ت 1121 
891 2 :عم الدع -تاصستامع وعاح قط 
ْ 





كما تلاحظ أعلاه تم إضافة كود الخلفية (:2©1:81:0111201-00101) وتعني تعيين لون كخلفية. قمنا بتحديد اللون الذي نريده كلاس (216111) في السطر 
/؛ . وسيكون شكل الموقع بعد التعديل والحفظ كالتالي: 


عع ع ل إلا" 


جزيرة سفطرى جمال الطبيعة والسياحة - البمن 


سقطرى وتكتب أيضا سقطراء أو سقطرة أو سوقطرة: هى أرخبيل يمني مكون من أربع جزر على المحيط الهندي 
قبالة سواحل القرن الأفزيقى 5350م جنوب شبه الجزيزة العربية[1]. إن انعزال الجزيزة الطوبل عن أفزيقيا وشبه 
الحزيرة العربية قد خلف مستوى فريد وغير مالوف من الاستيطان الحيوي على الحزيرة: وكذلك في المستوى 
الاجتماعى لسكان الحزيرة تفاصيل أكثر,, 





لاحظ بعد كل خطوة نحصل على شكل رائع للقائمة من حيث التنسيق والالوان والشكل ولم ننته بعد. سنقوم الان بإضافة ميزة تعلمناها مسبقا وسنطبها 
الان ايضا ولكن مختلف نوعا ما وهي خاصية تغير اللون عند التأشير بمؤشر الفأرة على أحد عناصر القائمة. وهنا يجب علينا القيام بعمل أي دي آخر 
متفرع من روابط عناصر القائمة كما في الكود التالي: 


111 لتتتتعتدرة 
2221152 : قوري 5-2 1151-5631 
12 : نزتج -111 12 قن 
: 3322 - : 3131 271121-11 قن 
د 
1 13 111 تتسنعسة 
151313152 : م3 لم5 0031 
/ 
4ت 13 111 تتسعسة 
م 2151152 : 1513 عا دعدع 015- دمن 
: 4211 : عملامع 
5252131 ,13170325 , ""لتقلات 1 1127 13170325" : 57 ل كنظ 120111-12 
عتر8 1 : 552 53--10111 
ل1لصط : عاتان 0111-51 1 
5511343 21281 نا ف : عرع عمط 
ل عتمم عدرة 1 عم : دمجم 
م5 لم5 2ر5 : 115 3ع عم عوط 
: لآاناك ا : عدم 1مع - ل تتامع وعاع مط 
ْ 
224ص : 3 11 111 تتنمعهرة 
+820 2 : عدم المع -متصتامع وعاع مط 





لاحظ تفرع الاي دي للأكواد الخاصة بالقائمة وعناصرها وروابطها بشكل سلس ومتتابع. هنا أضفنا في السطر ١‏ الاي دي :2:12:01 وهو كود ثابت 
يضاف لأي ديف وهنا تعبيريا يمكننا تفسيره ( الروابط في عناصر القائمة الفلانية الموجودة في الاي دي الفلاني الذي هو 21رع2 طبعا). 


وسيكون شكل عناصر القائمة او لونها عند التأشير عليها كما في الشكل . 


: 0 00967 :ع اا8 0لا 
ع .0 م طاععغ]. ثانالا نالا 





شلوك وات “لو 7 المووة 2 /00967 :2 ع اا8 ١/0‏ 





دورة المواقع والإعلام الإلكتروني 


اص كي احص حك حك دم 


جزيرة سقطرى جمال الطبيعة والسياحة - اليمن 


سقطركى وتكتب أيضا سقطراء او سقطرة أو سوقطرةء هي ارخبيل يمني مكون من اربع جزر على المحيط العندي 
قبالة سواجل القرت الأقرر يقي 350كم جنوب شبه الحزيرة العربية[1]. إن اتعزاك الحزيرة الطويل عن افريقيا وشبه 
الجزيرة العربية قد خلف مستوى فريد وغير مألوف هن الأسنيطان الحيوي على العزيرةء وكذلك في المستوى 
الاجتماعي لسكان الحجزيرة تفاصيل أثثر.. 





عند التأشير على أي عنصر في القائمة سيظهر اللون الذي حددناه كما في الشكل أعلاه. 


يمكنك عمل خلفية صورة مخرفة أو مصممة باللون الذي يبحدده المصمم والذوق الذي يختاره على العناصر في الاي دي 
(2 ذا آنا تتصسعحم) أو الاي دي زئ[ آنا تاسعحم) أو (-دء؟2:120 1[ آنا تتسعحم) أق (آن تاسعحم) أو كلاس (تادرعدم). 


الخلفية الصورة في حالة وضعها نحددها على لون محدد ومقاس محدد وحجم خفيف وان لا تكون صورة كبيرة عن اللازم كي نحافظ على خفة الموقع 
وأن لا يثقل التحميل للموقع عند إطلاقه مستقبلا. 


يمكنك عمل اي خصائص تريدها لروابط العناصر في القائمة سواء الالوان او الظل او غيرها وكل ذلك يعتمد على الابداع والتفكير وليس التقيد بما 
خاصية الحركة (ءع1121011) 
لموقع أكثر حرقة وجذاب سنضيف الان خاصية جديدة وهي النص | لمتحرك للموقع والخطوات كالتالي: 


- عمل ديف بنفس مقاسات الديف للقائمة وكلاس خاص به للخطوط والألوان والخلفيات. 


- إضافة الخاصية 22810116 والنص الذي سيتحرك في الموقع. 
ويكون شكل الخاصية كالتالي: 


2 15 كلط5110<1-:0101-)1802 10111)11005-110111 140011-)1)001-5 ا ذط]كاظ1 11112111-1009 ؛1141011:1> 
>/١141+00101:1<‏ أااع 1 عا 10 5د تلآ5©10 1221011 2 01 عامرسدعءء 


لاحظ الكود أعلاه خاص بخاصية النص المتحرك. اللون الأخضر هو للخاصية نفسها والأحمر قيم الخاصية أي نحدد فيها نوع الحركة (101كقطعط6) 
والعرض (771061) واتجاه التحرك (102)عع:111) ولون الخلفية (750101). اما النص الانجليزي بالأسود هو النص الذي سيتحرك وقد يكون بالعربي 


أو صور أو أي شيء تريد تحريكه داخل ال(ع17321:011©6). 


نقوم الان بعمل كلاس للديف الجديد للنص المتحرك بعد ديف القائمة وعمل الديف نفسه وربطه بالكلاس كما في الكود التالي: 


4 2 1ق 2 1053 . 





في السطر ٠١"‏ كما تلاحظ أعلاه عملنا كلاس وسميناه ©12231:0116 ونقوم الان بعمل الديف وربطه به كما في الكود التالي: 


0 /00967 :ع اا ١/08‏ 


تلوف اة رتنا العيية وا 00 





011 “رد " مع زان 322 5" -5 55 1ه 01> 





نقوم الان بإضافة الخاصية داخل الديف وبعض القيم كما في الكود التالي: 


<" 1355-5131 01> 30 
<1ظانا لو لها / > دورة المواقع الالكتروتية والإعلام الالكتروتي والتسويق الالكتروتي<2152->200102 219025->02 012681 235102-52011طه52 62-1005 1710 نالو هاا > ١‏ اين 


32 > 0157< 


في السطر ٠‏ أضفنا ديف وربطناه بالكلاس الخاص به »في السطر ”١‏ وضعنا خاصية النص المتحرك (ع11121:0]116) أضفنها لها خصائص العرض 
0١ 6.‏ السلوك وحددنا سكرول اي تحرك بخط مستقيم الاتجاه ايضا وحددنا يمين ثم كتبنا النص ثم أغلقنا الخاصية. 


سيكون شكل الموقع بعد التطبيق والحفظ كما في الصورة: 


عع ل تلن الحارنالكت 


| | ارزع 1 - ل 


اا |[ ا | ل 





دورة المواقع الالكترونية والإعائم الالكتروني والتسويق الالكتروني 





سقطري وتكنب نضا سقطراء أو سقطرة أو سوقطرة: هى أرخنا, يقتى مكون هر أريع جزر على , المحجط الهتدعه 


كما تلاحظ سيكون لدينا نص متحرك في الموقع. وسنقوم الان بعمل بعض التعديلات لشكل أكثر تنسيقا من خلال الديف الذي توجد فيه خاصية 


الع 1121:0111 من خلال الكلاس الخاص به الذي انشأنها وسنقوم بإاضافة التالي: 


- لون النص والخط والعرض. 
- طول الديف وعرضه. 
- الحواف او الاطراق تحديدها بلون معين بالإضافة الى زوايا ملتوية. 


نأتي للتطبيق وسيكون شكل الكود كالتالي: 


1 21122 10125 . 
)76 #2 : عم1امع 
52211 11102585 , "لقنتت سا1 117325" :137 هلانت 9111-12 12 
2 :120111-15 
1ه : طن 120111-51 
#850 113همه :عه عمط 
2 عتدة عدوة عندمش : 1115 مقع لع ع عمط 
نا 3 : 1ق 115231 
رك : ضزت 3133-6 12 قل 
) 





قمنا بعمل الكود اللازم تنسيق الديف الذي فيه النص المتحرك بالإضافة الى خصائص النص نفسه. في السطر ١٠١7‏ اضفنا اللون» في السطر ٠١/‏ حددنا 
اسم الخط المطلوب. في السطر ١٠١5‏ حددنا حجم الخط ١8‏ بكسلء في السطر ١١١‏ حددنا الخط يكون عريض في السطر ١١١‏ حددنا الحواف او الاطراف 
بشكل خطي وبلون محدد اعلاه بمقدار ١بكسلء.‏ في السطر ١١7‏ حددنا مقدار حدة زوايا الديف بمقدار ؛ بكسل لكل الزواياء في السطر ١١‏ حددنا 
ارتفاع الديف "١‏ بكسلء حددنا مسافة معينة من اعلى أو بعد " بكسل. 


بعد التطبيق أعلاه والحفظ سيكون الموضع بالشكل التالي: 


081١: 00967 0 01‏ اا 
الا أ .وام تاعع10]0©1 :اتلهمطع ‏ 772755202 2:00967 ع ا|8 ١/0‏ 
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دورة المواقع والإعلام الإلكتروني 


/ 
5 اا 


لل لكك ار 


ورة المواقع الالكترونية والإعلام الالكتروني والتسويق الالكتروني الالكتروتى 


جزيرة سقطرى جمال الطبيعة والسياحة - اليمن 


سقطرك وتثتب: أيضًا سقطراء 5 سقطرة أ سوقطرة. شي أرخبيل يمتني مكون من أربع جزر على المحيط الهندي 
قبالة سواجل القرن الأقريقي ناكم جنوب شبه الحزيرة العربية [1]. إنه اتعزاك اللجزيرة الطويل عن أقريقيا إتشيمت 
الحزيرة العربية قد خلف مستوى فريد وغير مألوف من الأسفيطات الحيوف على الجزيرة: وتذلك في المسموع 
الاجفماعي لسكات الجزيرة تفاصيل اخثر.. 


جزيرة سقطرى جمال الطبيعة والسياحة - اليعن | 


سقطرع وتكتب أيضا س قطراء أو سقطرة أو سوقطرة في أرخبيل د يمني مكون من أربع جزر على المحيط الهتدي 
قبالة سواجل القرن الأقريقي لاتكم جنوي شبه الجزيرة العربية[1] ا اتهزاله العزيرة الطويل عن أقريقيا #شبه 

الحزيرة العربية قد خلف مسعوى فريد وغير مألهوف من الأسقيطات الحيوي على الحزيرةء وخدذلك في المستوى 
الاجنماعي. لسكات الحزيرة تفاصبيل اثثر.. 


جزيرة سقطرى جمال الطبيعة والسياحة - اليمن 


سقطرق وتتنب أأدضا سقطراء 5 سقطرة أ سوقطرة: شي أرخبيل يمني مكوت من أربع جزر على المحيط الهندي 
قبالة سواجل القرت الأقريقي لاثم جنوب سبه العزيرة العربية[1]. إن اتعزالك العزيرة الطويل عن أفريقيا وشبه 
الحزيرة العربية قد خلف مسعوى فريد وغير مألهف من الأسقيطاتة الحيوي على الحزيرقء وكخدذلك في الشسقموف 
الاجتماعي لسكان العزيرة تفاصيل أكثر.. 


خاصية الخلفيات (82621581:01110) 
من أهم الخصائص في تصميم المواقع الالكترونية هي الخلفيات لأن الموقع في يهتم بالمظهر ولأن الخلفية تغطي مساحة كبيرة في الموقع بالنسبة 
للخلفية العامة للموقع أو خلفيات الأجزاء داخل الموقع الإلكتروني. سنقوم الأن بعمل خلفية للموقع كاملا نقوم بإيجاد خلفية مناسبة وهنا ملاحظات فنية 
يجب التنبيه لها وهي : 


- نحاول قدر 


الامكان بأن يكون لون الخلفية مناسب لألوان الموقع ككل. 


- يفضل أن تكون الخلفية لون محدد من أجل الحفاظ على الموقع خفيف التصفح. 


- إذاتم عمل 


لدينا صور كخلفيات سنستخدمها كخلفية للموقع كل خلفية لها خصائص وقيم معينة حسب رغبتنا : 


كانتا 


 طو1للمو‎ 


صورة كخلفية تصغير حجمها قدر الامكان. 





 طو2[مو‎ 











كما تلاحظ أعلاه أنشأنا مجلد جديد أسميناه م78 ووضعنا فيه الصور الخاصة التي سنقوم بتعيينها كخلفيات وهن كالتالي: 


93 (م(.1ع6) خلفية ومقاساتها 0*٠ ١(‏ بكسل). 


1ع .0 م طاععغ]. ننانانا نالا 


التو 11611 الصسفوة 


0 /00967 :ع اا ١/08‏ 
52 00967 :2 ااا ١/08‏ 





- (عمؤ.282) خلفية ومقاساتها 589*1١١1514(‏ بكسل). 
- (126م254.0) خلفية ومفاساتها ل ؟ .ع بكسل). 


نقوم بعمل الخلفية للصورة الأولى وسيكون ذلك بداية بعمل كلاس (70079) بدون نقطة ضمن ملف الوو916».0)ه في بداية الكلاسات وهنا ملاحظة وهي 
اننا لن نضع نقطه امام الكلاس كما ستلاحظ لأن كلمة (6003) بدون نقطة كلمة محجوزة ضمن البرمجة في الووح لذلك نضعهما كما هي مع القوسين 
الذين سيحويان الخصائص وكما في الصورة التالية للكود: 


الرااء هادا 
:|: (ودذ. 1وط/روط) 1ن : عوهسة-لستامع وعاع دط 





كما في السطر ه أضفنا خاصية خلفية بتعيين صورة وحددنا مكانها بواسطة برنامج الدريف ويفر. وسيكون شكل الموقع بعد التطبيق والحفظ كالتالي: 


1111110 


دورة المواقع والإعلام الإلكتروني 


0 0 
جزيرة سفطرى جمال الطبيعة والسياحة - اليمن 
سقطرى وتكتب أيضا سقطراء أو سقطرة أو سوقطرة: هي أرخبيل يمني مكون من أربع جزر على المحيط الهندي 
قبالة سواحل القرن الأفريقى 0م جنوب شبه الحزيرة العربية[1]. إن اتعزال الحزيرة الطويل عن افريقيا وشبه 
الجزيرة العربية قد خلف مستوى فريد وغير مألوف من الاستيطان الحيوي على الحزيرة: وكذلك في المستوى 
الاجتماعى لسكان الحزيرة تقاصيل أكثر.. 


جزيرة سفطرى جمال الطبيعة والسياحة - اليمن 


سقطرى وتكتب أيضا سقطراء أو سقظرة أو سوقطزة: هي أرخبيل يمتى مكون من أربع جزر على المحيط الهندي 
قبالة سواحل القزن الأفريقى 0ا35كم جنوب شبه الحزيرة العربية[1]. إن اتعزال الحزيرة الطويل عن أفريقيا وشبه 
الجزيرة العربية قد خلف مستوى فريد وغير مالوف من الاستيطان الحيوي على الحزيرةء وكذلك في المستوى 
الاجتماعى لسكان الحزيرة تفاصيل اكثر.. 


جزيرة سفطرى جمال الطبيعة والسياحة - اليمن 


سقطرى وتكتب أيضا سقطراء أو سقطرة أو سوقطرة. هى أرخبيل يمنى مكون من أربع جزر على المحيط الهندي 
قبالة سواحل القرن الأفزيقىي 0م جتوب شبه الحزيرة العربية[1]. إن اتعزال الحزيرة الطويل عن أفريقيا وشبه 
الجزيرة العربية قد خلف مستوى فريد وغير مألوف من الاستيطان الحيوي على الحزيرة. وكذلك في المستوى 
الاجتماعي. لسكان الجزيرة تفاصيل اكثر.. 





كما تلاحظ أعلاه تم تعب تعيين الخلفية على < جميع انحاء الموقع (670037). وهنا يجب ان نلاحظ ان الخلفية التي قمنا بتعيينها لها مقاس صغير ولكن بشكل 
ل ردك ل جنل 1 اح فل لفطك شالع مشر ةا لق" 


نأتي لتطبيق الخلفية رقم ؟ وسيكون الكود بالشكل التالي: 


4 اك 
+ : (323. توط/روط) 111 : 2ق قنقة - حتتامع وعاع قط 5 





كما تلاحظ اعلاه تم تعيين الخلفية رقم ؟" وسيكون شكل الموقع كالتالي: 


081١: 00967 0 0‏ اا 
لا أ .وام تاعع10]0©1 :اتلهمطع ‏ 772755202 2:00967 ع ا|8 ١/0‏ 





> 7 1 


عيان اع تاكن ال-ازعاات 


#8 
جزيرة سقطرى جمال الطبيعة والسياحة - اليمن 
سقطرى وتكتب أيضا سقطراء أوسشقطرة لو سوقطرة: هى أرخبيل يمتى مكون من أربع جزر على المحيط العتدي 
قبالة سواحل القرن الأفريقى 0م جتوب شبه الجزيرة العربية [1] . إن اتعزال الجزيرة الطويل عن أفريقيا وشبه 
الجزيرة العربية قد خلف مستوى فريد وغير مألوف من الاستيطان الحيوي على الحزيرة: وكذلك في المستوى 
|| الاجتماعي لسكان الجزيرة تفاصيل اكثز.. 


جزيرة سقطرى جمال الطبيعة والسياحة - البمن 


سقطرى وتكتب أيضا سقطراء اء أو سقطرة أو سوقطرة. هي أرخبيل يمتى مكون من أربع جزر على المحيط الهتدي 
قبالة سواحل القزن الأفريقي 350كم جتوب شبه الجزيرة العربية[1]. إن اتعزال الجزيرة الطويل عن أفريقيا وشبه 
الحزيرة العربية قد خلف مستوى فريد وغير مألوف من الاستيطان الحيوي على الجزيرة. وكذلك في المستوى 
الاجتماعىي لسكان الحزيرة تفاصيل اكثر.. 


5 
جزيرة سقطرى جمال الطبيعة والسياحة - اليمن 
سقطرى وتكتب أيضا سقطراء أو سقطرة أو سوقطرة. هى أرخبيل يمتى مكون من أربع جزر على المحيط العتدي 
قبالة سواحل القرن الأفريقى 0 جتوب شبه الجزيرة العربية[1]. إن اتعزال الجزيرة الطويل عن أفريقيا وشبه 
الجزيرة العربية قد خلف مستوى فريد وغير مألوف من الاستيطان الحيوي على الحزيرةء: وكذلك في المستوى 
الاجتماعى لسكان الحزيرة تفاصيل أكثر.. 





كما تلاحظ الشكل أعلاه تم تعيين الخلفية على الموقع كاملا ونلاحظ هنا ان الخلفية تكررت أي الصورة ومن المنطق لمثل هذه الصورة أن لا تتكرر 
ولمعالجة ذلك نقوم بإضافة خواص جديدة. 


خواص الخلفية دع ع20-1ناهع؟1ء82 - 0516102 م-20نامرعءاءد8) 


لتعديل ماسبق من سنضيف بعض الخواص ضمن التعديلات التي نريدها وهي : 


- تكبير حجم الصورة طول والعرض بما يتناسب مع الموقع كاملا. 

- اضافة قيمة او خاصية ضمن كود الخلفية لجعلها واحدة فقط وبدون تكرار. 

- جعل الخلفية في الوسط للموقع. 

-- تعيين كخلفية خلف الصورة مشابه لأطراف الصورة مع تحسين اطراف الصورة بالفوتوشوب. 


نقوم بإضافة الأكواد وسيكون كالتالي: 


24 
: 235549 : عم1مع - مصنامع وعاء مط 
: (325 . قط “روط) 1121 : ع وهسد- مصستامعوعاء هط 
2ت 2 : 1151533 5 ضح - نامع وعات قط 
1 مورعع -205 : 15د مومع - لتنامع وعاء ضط 





في السطر ٠‏ تم تعيين لون خلف الخلفية» في السطر ؟ تعيين الصورة كخلفية». في السطر سبعة أضفنا خاصية (02©1251:0111201-00510102) وتعني 
مكان الخلفية ولها قيم منها(:ع00-2»6)]) واخترنا هنا قيمة م0 وتعني اعلى, اضفنا ايضا في السطر 7 خاصية (182©12510111101-176©2)6) وتعني 
تكرار الخلفية ولها قيم منها (70-17676©214) وتعني لا تتكرر وقيم أخرى مثل (-1276©21) وتعني تكرار افقي و(676214-9) وتعني تكرار عمودي فقط 
وسنتعلمها ايضا في الخلفية الثالثة. 


بعد تطبيق الكود أعلاه والحفظ سيكون شكل الموقع كالتالي: 


11111 0 00967 :|08 ا/ا 
الا كسا أ0.و1مداءعع0]0©1مأ :اأهمع 2 772755202 2:00967 8|128 ١/0‏ 








02 


عاعان ا ل ان إالك' يالك 


















| جزيرة سقطرى جمال الطبيعة والسياحة - اليمن 

١‏ سقطرى وتكتب أيضا سقطراء أو سقطرة أو سوقطرة. هى أرخبيل يمتى مكون من أربع جزر على المحيط الهندي 

ا | | قبالة سواحل القرن الأفريقي 50 جتوب شبه الجزيرة العربية[1]. إن اتعزال الحزيرة الطوبل عن أفريقيا وشبه 
الجزيرة العربية قد خلف مستوى فريد وغير مألوف من الاستيطان الحيوي على الجزيرة: وكذلك فى المستوى 

| الاجتماعي لسكان الحزيرة تفاصيل أكفار:. 









ظ جزيرة سقطرى جمال الطبيعة والسياحة - اليمن 


سقطرى وتكتب أيضا سقطراء أو سقطرة أو سوقطرة» هى أرخبيل يمتى مكون من أربع جزر على المحيط العتدي 
قبالة سواحل القرن الأفريقي 0م جتوب شبه الجزيرة العربية[1]. إن اتعزال الجزيرة الطويل عن أفريقيا وشبه 
الجزيرة العربية قد خلف مستوى فريد وغير مألوف من الاستيطان الحيوي على الحزيرة: وكذلك في المستوى 
الاجتماعى لسكان الجزيرة تفاصيل أكثر.. 


جزيرة سقطرى جمال الطبيعة والسياحة - اليمن 


سقطرى وتكتب أيضا سقطراء أو سقطرة أو سوقطرة: هى أرخبيل يمتى مكون من أربع جزر على المحيط الهنذي 
قبالة سواحل القرن الأفريقي 50 جتوب شبه الجزيرة العربية[1]. إن اتعزال الجزيرة الطويل عن أفريقيا وشبه 
الحزيرة العربية قد خلف مستوى فريد وغيز مألوف من الاستيطان الحيوي على الحزيرةء وكذلك فى المستوىك 
الاجتماعى لسكان الحزيرة تفاصيل اكثر.. 


كما تلاحظ اعلاه تم ادراج خلفية بعد تكبير حجمها ولكن هناك مسألة أخرى يجدر التنبيه لها بالإضافة الى ان الخلفيات الكبيرة تؤثر على سرعة تصفح 
الموقع لدي ذوي السرعة المحدودة ايضا ان عرض وطول الشاشات للمتصفحين تختلف من جهاز لأخر لذلك دائما يفضل عمل الخلفيات الصغيرة 
الموحدة. 


إضافة الخلفية الثالثة سنقوم بالتعديل على الكود وسيكون كالتالي: 


تج . قوط “روط 1121 : 21352هة - سمنامع وعاعصط 
31-2 ع2 : 12ت م ددع - 1 نامع وجاع مط 





في الكود أعلاه في السطر ه عينا الخلفية المطلوبة, ذ في السطر 5 اضفنا خاصية تكرار الخلفية واخترنا القيمة (-76214©) وتعني تكرار افقي فقط. 


وسيكون شكل الموقع كالتالي: 


1 


دورة المواقع والإعلام الإلكتروني 


جزيرة سقطرى جمال الطبيعة والسباحة - اليمن 


سقطرى وتكتب أيضا سقطراء أو سقطرة أو سوقطرة» هى أرخبيل يمتى مكون من أربع جزر على المحيط العتدي 
قبالة سواحل القرن الأفريقى 50م جنوب شبه الجزيرة العربية[1]. إن اتعزال الجزيرة الطويل عن أقريقيا وشبه 
الحزيرة العربية قد خلف مستوى فريد وغير مألوف من الاستيطان الحيوي على الحزيرة: وكذلك في المستوى 
الاجتماعي لسكان الجزيرة تفاصيل أكثر.. 


جزيرة سقطرى جمال الطبيعة والسياحة - البمن 


سقطرى وتكتب أيضا سقطراء أو سقطرة أو سوقطرةء هى أرخبيل يمتى مكون من أربع جزر على المحيط العتدي 
قبالة سواحل القرن الأفريقى 0 جتوب شبه الجزيرة العربية[1]. إن اتعزال الجزيرة الطويل عن أقريقيا وشبه 
الحزيرة العربية قد خلف مستوى فريد وغير مألوف من الاستيطان الحيوي على الجزيرة: وكذلك في المستوى 
الاجتماعىي لسكان الجزيرة تفاصيل أكثر.. 


جزيرة سقطرى جمال الطبيعة والسياحة - اليمن 


سقطرى وتكتب أيضا سقطراء أو سقطرة أو سوقطرة» هى أرخبيل يمتى مكون من أربع جزر على المحيط الهندي 
قبالة سواحل القرن الأفريقى 0 جتوب شبه الجزيرة العربية[1]. إن اتعزال الجزيرة الطويل عن أقريقيا وشبه 
الحزيرة العربية قد خلف مستوى فريد وغير مألوف من الاستيطان الحيوي على الحزيرة. وكذلك في المستوى 
الاجتماعي لسكان الجزيرة تفاصيل أكثر.. 





إضافة الفوتر (الجزء السفلي للموقع): 


: 0-/,” /00967 :ع |ا8 0 
1ع .0 أم لاععغ]. ثانالا نالا 





حك ت 1600و اإعووة 2 00967 :2 ع اا8 ١/0‏ 


نقوم بإضافة جزء أسفل الموقع وفي نضع روابط وحقوق الموقع واي شيء يمكن وضعه هناك وسنقوم بعمله بما تعلمناه سابقا من روابط وديف 
وكلاسات وسنقوم بالاتي: 


- عمل كلاس للفوتر. 

عمل ديف وربطه بالكلاس. 

- اضافة روابط. 

- تعديل لون الروابط والخلفية للديف وسيكون الكود كما في الشكل التالي: 


1001-1 . 
7414 84 4 : دامع -تمصتامع وعاع هط 
+53115-552211 5 ,72112353 + 3ةنائلة 1 : 7ع1-1نانة 15-1 11نت1 
: هج : 511313 - جا رمن 
: 282 2 1 : 2552 51-:-1-0111 
م1 2999 113مو :ععم عمط 
تطتوة و3 عندمة : 601115 3ع عع عمط 
2ك : تع -133131قلة 


1 
: 





قمنا بإنشاء الكود أعلاه.» في السطر ١١7‏ تم انشاء الكلاس للفوتر وسميناه (101©7):في السطر ١١”‏ تم اضافة لون للخلفية الخاصة بالفوترء في 
السطر ١١4‏ تم تحديد الخط المراد. في السطر ١١5‏ خاصية تحديد مكان النص وحددنا بأن يكون اي نص في الوسط. في السطر ١75‏ تحديد حجم 
الخط. في السطر ١١7‏ تم تحديد حواف الديف. في السطر ١١١‏ تم تحديد مرونة زوايا الديف. في السطر ١١5‏ اضفنا خاصية البعد من أعلى بمقدار ؟ 
بكسل. 


"عرم 6ن "1335-7 2031335 
| <«ق/“> اتصل يتا #2" 7غععط وي 
| <هق/م»من تحن<" #4" 7عطط وي 
حق/»خارطة الموقع<"#"-121عغط وي 
1ط ار هه 
52837 /ر > جقميع العقوق محقوظة لدورة تعليم المواقع<تةصرد»> 
031 ره 
01 ره 





ننتقل لصفحة 1216:.1:01111 وكما تشاهد اعلاه اضفنا الديف قبل نهاية الديف العام الذي يحتوي الديفات كاملة. في السطر ٠١١‏ تم اضافة الديف وربطه 
بالكلاس فوتر الذي انشأناه »في السطر ٠١7‏ و”١٠و4١٠‏ اضفنا روابط ووضعنا # ولم نحدد إلى اين فقط للتمثيل ويمكنك تحديد الصفحات بنفسك. في 
السطر ٠١5‏ اضفنا كود الانتقال لسطر آخرء في السطر ١٠١5‏ اضفنا نص الحقوق بواسطة (:وم). في السطر ١٠١7‏ اغلقنا الديف. 


بعد التطبيق والحفظ سيكون شكل الموقع كالتالي: 


جزيرة سفطرى جمال الطبيعة والسياحة - اليمن 
سقطرى وتكتب أيضا سقطراء أو سقطرة أو سوقطرة. هى أرخبيل يمنى مكون من أربع جزر على المحيط الهندي قبالة 
سواحل القرت الأقريقي 0م جنوب شبه الجزيرة العربية[1]. إت اتعزال الجزيرة الطويل عن أفريقيا وشبه الجزيرة 


العربية قد خلف امسلوق فريد وغير مألوف من الاستيطات الحيوي على الجزيرة. وكذلك في المستوى الاجتماعي لسكات 
الجزيرة تفاصيل أكثر.. 





اتصل_ ينا | من تحن | خارطة الموقع 
ع جميع الحقوق محفوظة لدورة تعليم المواقع 


سنقوم 8 في ديف النص المتحرك وسثقوم به بعمل لو 


- في كلاس (ع2210116) نضع خلفية بيضاء. 


١/08 ||: 00967 0 0‏ 
لالتحا أ0.0أم داعع0©1م1 :اأهمع ‏ 772755202 2:00967 || ١/08‏ 





- نضيف خاصية (022117) ضمن الكلاس السابق ونحدد القيمة المناسبة للشفافية. 
سيكون الكود كما في الشكل: 


1122 1015 . 
22177 : عدم لمع - تنام عدو عاع قط 
5 . ذأ : باع حوره 
: ا8]6 2 : عمل1امع 





كما تلاحظ الكود أعلاه في السطر ١١7‏ تم عمل الخلفية اللون الابيض. في السطر تم اضافة خاصية الشفافية وقيمتها (0.5). يمكنك تغيير القيمة 
وملاحظة التغييرات. وسيكون شكل الموقع كالتالي: 


11110 


ععا ان ع عت ان اللدازيالكت 





ظ دورة المواقع الالكترونية والإعلام الالكتروني والتسويق الالكتروني 


جزيرة سقطرى جمال الطبيعة والسياحة - البمن 


سقطرى وتكتب أيضا سقطراء أو سقطرة أو سوقطرةء هى أرخبيل يمتى مكون من أربع جزر على المحيط الهتدي 
قبالة سواحل القزن الأفريقى 0م جتوب شبه الجزيرة العربية[1]. إن اتعزال الجزيرة الطويل عن أفريقيا وشبه 
الحزيرة العربية قد خلف مستوى فريد وغير مألوف من الاستيطان الحيوي على الحزيرة: وكذلك في المستوى 
الاجتماعى لسكان الجزيرة تفاصيل اكثر.. 


جزيرة سقطرى جمال الطبيعة والسياحة - اليمن 


سقطرى وتكتب أيضا سقطراء أو سقطرة أو سوقطرة. هى أرخبيل يمتى مكون من أربع جزر على المحيط الهتدي 
قبالة سواحل القرن الأفريقى 0م جتوب شبه الجزيرة العربية[1]. إن اتعزال الجزيرة الطويل عن أفريقيا وشبه 
الحزيرة العربية قد خلف مستوى فريد وغير مألوف من الاستيطان الحيوي على الحزيرة: وكذلك في المستوى 
الاجتماعى لسكان الجزيرة تفاصيل اكثر.. 


5 
جزيرة سقطرى جمال الطبيعة والسياحة - اليمن 

سقطرى وتكتب أيضا سقطراء أو سقطرة أو سوقطرة. هى أرخبيل يمتى مكون من أربع جزر على المحيط الهندي 
قبالة سواحل القرن الأفريقى 0 جتوب شبه الجزيرة العربية[1]. إن انعزال الجزيرة الطويل عن أفريقيا وشنبه 
الحزيرة العربية قد خلف مستوى فريد وغدير مألهف من الاستقيطان الحيوي على الحزيرة: وكذلك في المستوى 
الاجتماعى لسكان الجزيرة تفاصيل اكثر.. 





اضافة الخطوط 
بالإضافة للخطوط الموجودة والمعروفة والمدعومة في المتصفحات يمكننا ايضا اضافة خطوط حسب الرغبة للموقع الالكتروني وهنا سنتعلم كيفية 


اضافة الخطوط لصفحة الموقع بواسطة ال55). 


بداية نقوم بعمل مجلد جديد وليكن (0245؟) وسيكون في داخل المجلد ملفين (171غط.)02؟) وملف (6021.059) . ولدينا الخطوط التي نريد اضافتها 
للموقع في مجلد اسميناه (401215) كما في الصورة صور الملفات كاملة: 


ععا5 حا لا م18 ]المحم مدنا عمقل" 

عام عاك 11:1#م 715/١‏ عغممع لال 

8 1 عا باد وصانلدعكمف) 17 م ارت ١117‏ 6 
8 1 مهنا اا[ لا مصصطة ‏ :11م اكرت ١١11‏ غخمم؟ © 


الخطوط داخل مجلد (0115]): 


١/081: 00967 0 0‏ 
اه أرقت أعم.هأماعع]0©1)م1 :اتهومسع ‏ 772755202 2:00967 |8 ١/0‏ 





عات ع1 امع ممم عنغأدنا "ا 
كا كال عاط انع ماكر ا 11ل أمع.:داباوع ا -رممعملوىيم ا 
8 49 عاط ععنالالا 11 ام ار 111 ادنر داوع -رممعملويم [ | 
8 م1 ]1] غخصه] عميزا معمنا 5دنارء حي +5 /ت١ ١١11‏ لالع مم1 رن 
لك ]1] أمم] عممزاعدهم ا قدتاء حي + رق١ 1١11‏ نالاع تطممة نا 
8 359 | أممة عميزاعيم ا لالشسام ااا عط | شنا 
8غ 375 11 خصم] عميزا عدم ا اطلام ااكرا 111 11 شنا 


لإضافة الكود الخاص بإضافة خط كما في الكود في ملف (1021.©55): 


:"2-8 0ن" عدموع ودرح نما 


7* 21 تتتتا من[ 55ئنا #* ير 


2 خرن كت 


+1 دع دخ - حنرره 2 ذا 
"221127" :117 كناقتة 1901112-12 
: ( 5252 . تتتاع نم2 / قط دت2 ) 1121 : ععدع 
2212 1 قتتاعا نم2 “رقع تتد2 ) 11221 : مدع 


1 إرك 


5 
رجا 
ل 
1 
زع ا 
0 


/ 
4 سعوع -طعرم 2 ذم 
: "2125127" :آل تلتة 1 - غنات 1 
: (32عع . 515152 ”رقع تقت2 ) 1121 : عع ع 


/ 
+ تجموع - عورم ذا 
: "عاسم" :11 لتقت 2 - 12ت 1 
: (252 . طاعتقع رقع قت2 ) 1121 : ععع 
/ 
+ دمجوع - ننم ذا 
: " عاهدم 2 :115 للقت 12 - 12ت 1 
: (2ت5 5 . 11332ات 12-185 نحت صن لقنتت رقع نم2 ) 1121 : ععدع 
: (+77511. 32 111ق 2-182 نت زنن القعنق /, 5 ع نت2 ) 1121 : عع 
/ 


+111 . 
: "2031217" : 117 للقت 1 11ت 1 
:ع *ةنناك : 52 2011-51 


214 . 
"1 :157 قناقة 1-1 11ت 1 
+ : نا 2 : 52: 101112-51 


كن آخر خرن 20 
| -8! سه 


2 


2 


1 3 . 
: "ت 2" للقت 0111-1 1 
+ : 1223 : 52 101112-51 


آخر 2 


دما لك 


2 
55 





كما في الصورة أعلاه أضفنا الكود الخاص بانشاء أو اضافة خط جديد للموقع واضفنا رابط لمكان الخط حيث ©14011-122© وهذا الكود عبارة عن 
1 أي قاعدة معروفة لإضافة اي خط ومدعومة في كثير من المتصفحات مثل موزيلا فايرفوكس وجوجل كروم وسفاري واوبيرا وغيرها من 
المتصفحات 


في سطر ه نقوم بتعيين الاسم للخط حسب ما نريد. في سطري " و 7 نحدد السورس (51:2) أي المكان الموجود فيها الخط. وبقية الأسطر نفس الفكرة 
الى سطر ؟7". في الاسطر 74 الى 4” أنشانا كلاسات مختلفة وعينا في كل كلاس خط معين وسيتم تعيين كل كلاس لنص معين ايضا كما في صفحة 
(آدطخط.)دم]) وكما في الصورة: 


0 00967 :ع اا8 ١/0‏ 


.0ه اع ع]. /الالالا الا أعم.هأمطاءعع0©1)م1 :اتأجومع ‏ 772755202 2:00967 ٠/0818‏ 





> 11530 

و/ر "12-87 احج تم ص25 قلع : تعلط عيمج "جع رمع رمه "صوري 1 طم ردت "1-7 ناوه سورع عط معملد» 
<812512/> اضاقة خطوط<ه2151> 

عدث/ر "دوع رعأبروح اعمورييتن ‏ عه فوع زتاع 5 "7ج 2ع "مومع , عورموع "2-7 معط 121 131 > 

تمدص > 


3 
4 
5 
5 


ماه 
"”عرم يز روج ""حون لزت 20313 


ج/اغط> 

< 01 />رواد التكتولوجيا - دورة الهمواقع الالكتروتية <" 2ع معت : م1 1ه- ادع "-2 51171 "185551ع"-5 185 03> 
جد/اعطة» 

< 01 />رواد التكقولوجيا - دورة الهمواقع الالكتروتية <"ع2 ع اعت : هو 11ه-عاويع "-112 56 "13552 "-5 185 03> 


<”/ عطة» 
< 01 /,>رواد التكقولوجيا - دورة الهمواقع الالكتروتية <"ع ع ط رع : مو 11ه- ايع "5112-1 "13553 "5-2 185 03> 


خز إلى 


1 ره 
تمص ط ار > 
2501ل ار »> 


إكخ| ام اث 
١*3 8‏ سس كا إطتر] 





لاحظ لدينا 1" نصوص كل نص داخل ديف معين كل ديف أخذ كلاس مختلف وستكون النتيجة كما في الصورة: 


زرواد التكنولوجيا - دورة المواقع الالكترونية 
رواد التكنولوجيا - دورة المواقع الالكترونية 


رواد التكنولوجيا - دورة المواقع الالكثرو نية 


لإعماماع ال ل ٠‏ 0005 
اتلك ت 160و اإطووة 2 00967 :2 ع اا8 لا 


ع .0 م طاععغ]. ثانالا نالا 








501 1زم 


0 0 00967 :ع |08 
لعلله . اة وكت زو “اإطفوة ا 0 00 1000 





الباب الرابع .115501 يع 110م 


مقدمة حول 5117 

تعلمنا في الفصول السابقة لغة هامة في تصميم المواقع الالكترونية وهي لغة ال(,1117311) طبعا قد يتبادر في ذهنك العديد من التساؤلات وانت تتعلم 
هذه اللغة الهامة وتتذكر أنك ترى مواقع اكثر تفاعلية مع الناس كمتصفحين ومع إداريين الموقع وقد تتساءل هل على مدير الموقع الالكتروني ان يقوم 
بتعديل كود (.1117311) داخل الموقع كي يضيف خبر معين وإذا اراد متصفح التفاعل مع الموقع والتعليق على شيء ماء داخل الموقع كيف سيكون ذلك 
تساؤلات كثيرة لا يمكننا إحصائها ومن سيجيب على هذه التساؤلات هو مؤلف لغة (2112) وهو (1.©1:1011 125:22115) والذي أنشأها في عام 
ام 


لغة ال(2117) حلت جميع التساؤلات السابقة يمكنك الان عمل لوحة تحكم يدوية للمستخدم العادي ليضيف الأخبار والمحتوى للموقع سواء النصوص 
والصور والفيديوهات وغيرها. لغة ديناميكية وركز على هذا الوصف (ديناميكية) أي تفاعليه .تتفاعل مع المستخدم وتخزن بياناتها في قاعدة بيانات 
(501 717) التي تستطيع لغة البي اتش بي التعامل والاتصال معها ولن تحتاج بعد الآن أن تقوم بالتعديل على الكود لتضيف نصوص للموقع مثل 
ال(.1117311) والتي توصف بال(ستاتييك) واحفظ هذا الوصف جيدا ايضا فهو الفرق بينها وبين ال71117 وتعني ستاتيك أنها جامدة أو ثابتة لا يستطيع 
سواء مدير الموقع او المتصفح التعديل فيها إلا عن طريق الكود مباشرة. 

يجدر الذكر هنا إلى أننا لن نستخدم ال72112 فقط منفردة بل ندمجها مع ال.7117311 لأنها الأساس سواء مع البي اتش بي أو غيرها. كما ننوه أنه في 
هذا الفصل سيكون شرح عملي وتطبيقات عملية لن يكون هناك كلام كثير حول البي اتش بي وبعض المحتويات فيها تحتاج لوقت كبير ولكن سيكون 
الشرح والتطبيق لما سنحتاجه في انشاء المواقع الالكتروني والتي سنطبقها في الحياة العملية. كما أن هذا الكتاب أنشئ أصلا من أجل تعلم نظام إدارة 


المحتوى جوملا والتعرف كيف تعمل المواقع في هذا النظام. وسنبدأ بالتدريج في تعلم البي اتش بي من الاساسيات الصغيرة الى الاساسيات الأكبر ثم 
التطبيقات التي نحتاجها. 


لغة البى اتش بى (2115) 

هي لغة برمجة لتطوير صفحات الويب وهي لغة مفتوحة المرصد (غير مملوكة لشركة) يطورها فريق من المتطوعون وصممت لتطوير وبرمجة 
تطبيقات وصفحات الويب. تعمل البي اتش بي على السرفرات الخاصة بملفات الويب وتقوم بتنفيذ جميع اوامرها من خلال الخادم او السرفر في 
المتصفحات والتفاعل مع البيانات ومخرجاتها. 


التركيب البرمجي أو النصي: 
لغة البي اتش بي تعمل من خلال تركيب معين وطريقة معينة في طرح الأوامر للخادم وتنفيذها عبر المتصفحات وهنا صورة عامة لكود بي اتش بي: 
دام > 
:' أهلا بك في لغة البي اتش بي ' 2110© 


2> 


١/08 ||: 00967 0 1101‏ 
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متطلبات العمل على (5115) 


-١‏ برنامج (1ع1721112561). 
؟"- برنامج (56) *1(1:6211158625©1). 
"'- متصفحات ( ع3متدطكء ع1ع600 أو عدم/ء :111 21021115 ) 


قبل البدء في تطبيقاتنا وتعلمنا على البي اتش بي نحتاج إلى أدوات التي سنطبق عليها هذه اللغة. طبعا كما ذكرنا ان البي اتش بي تعمل على خوادم او 
سرفرات ولذلك تم إيجاد سرفرات وهمية ضمن الجهاز العادي أو برامج يمكنك العمل عليها وكأنها سرفر لتقوم بعملك في البي اتش بي وكأنك تعمل على 
سرفر حقيقي لذلك سنحتاج لبرنامج سرفر مثل ( 56171 1523330 أو “52171 «دددروعد_) سنستخدم هنا 5611 773322 ولك حرية الاختيار من 
بينهما. إضافة الى الدريم ويفر (056) :1(1:63133538627©1) الذي استخدمناه سابقا وأحد المتصفحات ( ©003*دطء ع1ع00© أو عدم]ع :”1 751021112). 


السركر المحلى وطريقة تركيبه (1اع517 22ج؟11) 

في البداية نقوم بالتأكد من نوع أو رقم النظام الخاص بنا بافتراض ان النظام الذي نعمل عليه هو ويندوز سفن (7 710120101575) لتنزل برنامج ( «رددده؟؟ 
المناسب للنظام لأن لدينا نوعين (016 32) و (716 64) وذلك عن طريق الضغط بالفارة بالزر اليمين على جهاز الكمبيوتر في سطح المكتب 
واختيار خصائص ستظهر النافذة كما في الصورة: 


مسعادرك ع بطربعع5 ممه معكديك ع اعموط امخكممت م كار 





ش 5 0 عصصصلط اعموظ اصكمم) 
اعنام لاه الاوز أناودات هلأ قل 1ملصا عتكقط بعالا 





ممكزامع ععحدم اع مانالا 3021 موا ععاع0 ا 
عه مانا 7 سسهك ملالا كوم اعد عأممع؟ ايا 
لععدعععم مخطوك ااث .حص هتكدرممعمن) امومع زاب 2009 ذا غخطاو حلمم ممتاععاممم معتكرد يآ 
اعنم ععزيممةه 15 ع5 عاك زه عع وام 1 
إرركة حرككت 
عضا عع أممعععاع زكرمك 217 لالع 3 ألارة ايا 
| انام اها الفلا نع اعصايةا 
0 ل الى عط هخ كمععم نتع عم[ ععمع مع منج كمحتمك مالانا ممما د فرخز 
9 معطعم ماع 7 
0 لاا نأك عااجاناظ 2 ها لاطا ابا لاتمة- 5 زأبن] | أععرم) زط امام[ امعوععنن 
(عاطوعن نا 8قة) نا ناناءذ ‏ :زالاضط) بحصمممعصم لمع ااماكما 
51 وتالأمععمنا احا -4ة ميا لاع اكز 
317 أمركانا كاحاة رصأ ع اططاد]1ه”ة كا غنامص] حاعيه | عد معظ ملخ تاعنات | عصد وعم د 0د 
اعأمعنا ممعم 


مامز هناك عض[ كع أممعععاع زكرمك 





عأواعم نا كتهده عدالانا 
لاحظ (ع6م9) «2عغ5595) ونلاحظ نوع النظام 4 5 بت. الان نذهب للموقع الخاص بالسرفر (5617©1 75:227) على الرابط التالي: 
جاع /201202. 77210121251771 11://5177377/ 


بعد الدخول على الرابط أعلاه في اسفل الموقع ستظهر لك الصفحة التالية : 


011 0 00967 :|08 ا/ا 
كسد أ0.و1محاعع]0]0©1صأ :اتأهمع ‏ 772755202 2:00967 8|115 ١/0‏ 





وتات !'اإنراء نا ١ل“‏ 


اناق اللا 511 505 /ال/ا مه 4501 ,ملام ,عزعومم / 0 


لاوم اللا 


3 : اللناقان5 4.0.4 : ولول خرزا ملام 5.4.12 : منزع 5.6.12 : _الوكرزا! 2.4.4 : ععهجوم 3 : لاللناقان5 4.0.4 : ململ خرزاراط لزه 5.4.16 : ملام 5.6.12 : _لل50رزا! 2.4.4 : ععومم 
3 : وناطع2)0 3 : وناطع2)00 


3.41 قز الامطاط 1.5 :200 2.1.2 وناطع(20 5.4.3 متام 5.5.24 اودارا - 2.4.2 عاعومم 0111 امام 1.5 2000 2.1.2 وناطع()2 5.3.13 مانام 5.5.24 امكلاا! - 2.2.22 عاعومم 
للف ني ا للع ين رن اع شافكت 0 3110)طع/لا 1.3.3 501811001 3.4.10.1 





في الصورة أعلاه على آخر نسخة على اليسار في الأسفل نقوم بتنزيلها وهي (2.219 (5.3 27112 ع5 81315 64) 11423/125151217191). نقوم 
بالضغط عليها وستظهر الصورة التالية: 





5ع! ؟ألاع/311م ع1215 5لام/ا 0 017171213 0105 أآنان 101111101315 عع اأمتتاع؟ ععلانامم 5نام/ا .لاطت ععمعع|! 5نا50) ألاع77اع ]آنأ 2ن عاطارمم15ل أوع عبع 5م دالا 
31162نا50 ع١‏ 0 5نام/ا أ5 _أعلاثاع5م317/الا 0 10115أناام/اغ كنات 5ع8 | 51011113110115 ١25‏ 125أنا0] علا0 |3165 ,ع116لغ غأغاع50 بنزدلانا إعذأاث 0 1011311010 21]625لاأعج 
.لإانأعع01 ]| 001716030 3ع ناملا ععلانامم 5ئلا0لا ,25م 


4 0 86< ع30اعق2 عاطتأناط 1 أذالع2 521 2010 عجن ادناذا/ا |5321| أ05ا27 ناملا : 101 ال لكام نالا 
10-8 0م35 12115 0501]1/001011030/211/0 1116 الاللاماما// :م : كأاط 32 مئاع .86:_اإوالع]ع/ا 501 1/010 
3---010غم 35 123115 11/0 /11105011.61/0011111!030]. الاللالاا// :م1 : كالط 64 عنرء. 64:_أوالعزعلا 501 1/010 


5 راظنالا 0:1 2 أعلثاع5م301/الا 5211| 13/10 001 ونا : 101ل لكام نالا 
2 اع لتاع5كم07قلالا وى االقأكما علمقعط لإلماعع أل 5ط االفلاا 1 عأعاع0 210 ]آ ا/ل32أ5ألانا ,0313 الاملا /5231 ,اعأنام ١تامءع‏ اناملا 00 لعالدأكما 5 طارخنالا ]ا 


اع اأمتتامء 501]1م]عأااا 01 لمأومعنا 9لا لطلأانزا معاأمدصمءع صععط عنلوط عاع داك أعنتاع 5م تقلا 1/22 11 01 01115 <زتتامءع ع5 الث : 01 1 ال اكام نالا 
اع |أمتتامءع ]501معع ]ااا 01 لمنواع/ا 6نالا لطأأننا 7130 امعط عنلوطا أعلاع5م لاا 01 5لمأو5اع/ا ر)عالروجع 

.115 011م0171ع عاع513 أعلثا5م31 لاا 01 تلمأ5اع/ا 5نا0 الام لأأناا كاع5]3 2.2 01 115 011م0171ع 1 "3ع ناملا ,50 

اع لثاع 5م31 الا 5131 0ت أع0 ألا ناملا ]| 00 ناملا ]! 





نضغط على الرابط الذي باللون الاصفر في السطر الثالث (.0112117 )1 0013171020 2317 7011) وسيتم التنزيل مباشرة لجهازك. في حالة كان نوع 
نظام الجهاز الخاص بك ؛ 5 بت قم بتنزيل النسخة (2.217 (5.3 21117 ع8 1115 64) 114112515111512 (120171211,041). 


تقوم بتنزيل البرنامج الى جهازك ثم تركيبه على الجهاز الخاص بك. بعد التركيب سيتم وضع ايقونة على سطح المكتب تحمل الصورة التالية او شعار 


ال(رء 517 د72 ): 
696ذ 


قم بتشغيل ال:وع561 772:22 ولاحظ الأيقونة الخاصة به في الشريط السفلي بجانب ايقونة الصوت وسترى في البداية يكون اللون بالأحمر وتعني بداية 
التشغيل واللون الاصفر تعني تشغيل السرفر بالنسبة للمرآام والأخضر الاستعداد الكامل للوطام وال501 319 .ولابد ان يكون باللون الأخضر للعمل 
عليه. وهنا انتهينا من تركيب البرنامج الذي سيعمل كسرفر لتطبيقاتنا للغة البي اتش بي 5))19 7/17 






0 00967 :ع اا8 ١/0‏ 
اتلوافا» لوكت 1ت علو للصيية 2 2:00967 اناا 


ع .0 م طاععغ]. ثانالا نالا 





طريقة عمل السرفر 5171 «رحطد2) 


عرفنا كيف يتم تنزيل البرنامج وقمنا بتنزيله على الجهاز وتركيبه. نأتي الان الى معرفة كيف يعمل السرفر الخاص بنا دائما عند العمل على السرفر لابد 
من تشغيله اولا سواء من سطح المكتب او من ايقونة البداية (52:6). بعد تشغيل البرنامج وظهورها باللون الاخضر في الشريط السفلي كما في 
الصورة : 





كما تلاحظ اللون الأخضر للأيقونة وهو ان السرفر مستعد للعمل بشكل كامل. ننتقل الأن الى المجلد العام الذي سنضع فيه مجلدات المواقع التي نعمل 
عليها والمسار كالتالي: (جهاز الكمبيوتر - قرص (:0)) - مجلد (م222؟1) - مجلد (773838) ). المجلد 77598 نضع فيه المواقع كل موقع مجلد داخله 
وقبل ذلك نقوم بحذف اي ملفات بداخله وادراج مجلدات المواقع الخاصة بنا. وداخل هذا المجلد اعتبر الموقع الخاص بك في سرفر حقيقي على الانترنت. 


نأتي الآن لتشغيل السرفر في المتصفح وهناك طرقتين بعد تشغيله وظهوره باللون الاخضر: 
الطريقة الأولى: فتح المتصفح ووضع الرابط التالي: ( 1610://1021120514 ). 


الطريقة الثانية: من الأيقونة للسرفر نضغط بموؤشر الفأرة عليها باليسار وستظهر خيارات نضغط اول خيار في الأعلى (1022110514) كما في الصورة: 


متقلانا موعذاائم ببتطا مععرعيسدوم 





00 إننا 
صتحم اعشربزاباامحام ١‏ 
بطاصاععماك بتصممي الى 

ع عطاعومم 
ميرم 
الوكزانا 


لمعمل جاعم 
لمق عات انا 
ععع يمعي أاثر )رك 









1 


/ا ع 25 ةر بارا 


كعع ع5 اايث مذ 
كعع ع5 اآخثر أرماوع 8 


152 امت عم 


بعد عمل احد الطريقتين السابقتين ستظهر الصفحة التالية في المتصفح (102112056): 


11111 0 00967 :|08 ا/ا 
الا كسا أ0.و1مداءعع0]0©1مأ :اأهمع 2 772755202 2:00967 8|128 ١/0‏ 








لد 


ع برع 5م3/الا 


ع15انج ةط ممتكرعلا 2,2 وواوعع/!ا 


انان ]زه ن) زع رحرع5ه 
2 : (اوتلورعلا عداعدمصم 


7373 :اوتوترع/ا مبرم 


ع مرك طق غ008076_ترزهه اق عدلمعاقى اق لل حا أق ععك طق : كرمأكمعغعيع لع0ده1 
ك3 اق م اق عا ططق وعءء اق ع3 طنأق 
انه داق امك طق مجع حم مزق مدز ماق ارمع ماق 
0اود زم ساق 300 اق ددع ططق ممعم لعج طاو عنم اق 
دوك اق مدنا موق اناج ماق مد داق مع زمععاوخ ماق 
دود اق دك ل را/ا سولق العام دونك داق عوراع داق ممع داق 
نن طق وأ كطاتم طلخ ع مقط 2ع لع ومة داق ع1 نا/ا| حدد ملق ع لقع احور ماق 
اكقحاحم اق ع]ذاود_ملم داق اودلزت_ملم داق أأودنزحم ططق اودبزح داق 
وناحاء 0 ملق 


4 :(اوأئتزعلا اوكيزا/! 


1005 
()مكمتمام فى 
متحمل د زدوملام فق 


5غأعع[220 'زناولا 


1 300611 








كما تشاهد أعلاه ظهرت الصفحة الرئيسية لل (10021112056) وتلاحظ (10019) وهنا يندرج في الاسفل (0171110) وهي معلومات حول البي اتش بي 
في السرفر ورقم النسخة والاعدادات وايصا (:2112111520111111) وهو الاهم هنا ومنه نتحكم بقواعد البيانات بشكل كامل. أما ما يندرج تحت ( :7570111 
2065© هنا تظهر المجلدات التي تعمل عليها من مواقع وصفحات ويب وكل موقع يكون في مجلد كلا على حده. 
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اول تطبيق في («511) 


نقوم بعمل مجلد جديد داخل مجلد 777959 ونسميه مثلا 57©11. (تعرفنا مسبقا اين يوجد مكان 775959 ) 
نفتح برنامج ١ز1(1-62111559©25.‏ 
من برنامج -77592561زوع(1 نختار (©1) ثم (22189). 


تنفيذ الخطوة السابقة نختار (21172) ثم زر (ع)921ع01) كما في الصورة التالية. 


| اهالحا 795 ١‏ 2 عمواه0 ١‏ ع 00 2 ماعنا الاولمالالا م51 كلمقصصم #تصممع بؤأتلهلا غيعكم1 معألا زلء علع الام 


:أناملاقا 
دعمم> 5 

لمعتعامع رمعي مسنام 1 دوة” ءامقا8 ا 
1 مد ععلمعط رامع ع امع ,ع3 مصنام 1 
لعمع ممع رلنونا مدا 1 . ١‏ عا ةاممع 7 كاصةا8 ده 

01 لود ععلوع7آ رلعمع ممع رلأناوذا اتناف 1 
؟قاع10ه ع1 ,لع جاتاناامه 2 9 5 3 
لمة ععلدعط رقطع له غمع| رلعناة متوناى 2 1 أنامبرة | 10 جا ابام ا 
قطع510 غلاو1؟ رلع7 لترناامه 2 
الم قد 101 1ك م ب" عأداممع 1 مم] عووط 

#قطاع لزه مع رلأناوذا 

لمة ععدعط ددع فه ع1 رفتنوذا ممناف 2 ْ ٠‏ 
3داء910 غ7أوا؟ رلأناونا مناف 2 9 4 عامنرة 5 لومم] عودم 5 ا 
#مدحة 117 | وب ميويني] عقاف وار رنضية فد د " ب 
ع7 77اناامه 3 5 
ععذدمة ممه ععممعط ع8 مسناف 3 .ىم ١‏ كنك 
لأنونا مام 3 1 : 
#مرممة ١‏ سام في قمعا نه مصامة 
مع ,أقطعء510 أو ,ع8 0تاناامء 2 :11/115 
عو لمق ععلوع7آ بلع لتناامء 3 :5 لبن 








| + مدعنا م نلق أ :55 أنام/زة ا 


7 هه :ع5 055 ملام 


ايا 


ومتاللع غلاعمممم] عاطهمع 


غ5بزاهأقن 5د5ع0أؤنا8 غنادطة 71002 لقعا 
انأللع دع ممعم]1 





























اح ا 213 ”تمه ١‏ - #مونمم | البح لين ا ا لي ل ور ا 0 

# ا 

اعصده0 60لاامنا| بعوم © ينج ب 40 60 هنا النااالت ا ا لتكلا ْ 

ا ]| <"050 . 15301131 32211011-2231315 / 212 /7011طتطعة /18 / << 0 . 113. 1761م /, / : عط" "511 / 123251102317 0. 1 :3311111 219 / / 13 / /-" 281:1 لسعط 5م ه202 ! ا 
حي <"ل1تتط تعد / 1999 /ريع<ه . 173. 777 / / : ماعط" -250125 لطعط> 
تسر <موعط> 
5 </ "2-8 تجن 25 قط :1ط رععرمح "عن ورم ع رمه "م15 ص تع ع دهن 15-7نان هم لطع 22 18> 
<61225>/151512ننا 20 60 6<1253151 11> 
- <مدعط / > 
<01ه0ط> 
<تتق هط / > 


خلشتغط > 





1-8ن) علمنمنا ععو 1 / علا 











710 -1 
|- 55211 #وم ‏ جغت - انا كتا | 











: 0 /00967 :ع || ١/08‏ 
وت 





تلكا زواكت001 رو “اإمليوة ا 0 0 0 ا 0000 





















































لاحظ اسم الصفحة (10260160]) نقوم بحفظها بالضغط على (1]1) ثم (527) ستظهر نافذة تحدد لنا مكان وضع الصفحة وبدورنا نقوم بالدذهاب من 
خلالها الى القرص (:0)) ثم (2:23؟) ثم (599999) ثم المجلد الذي سنضع فيه الصفحة التي سنبرمج فيها (576121) ونسمي الصفحة بأي اسم وليكن 
(:12206). 


سيكون لدينا ملف بي اتش بي جاهز للعمل عليه وتجربته. 


نقوم بعمل أول كود في البي اتش بي وهو كالتالي: 


.11ت غزق ترز هلا 





حر 


12151131 5ت 2 1-2 قتاع قلع “نآ 101 “1 لقاع تلم “رخا 1 ”روعت . 783 امار كر : قوط عاظ"” ‏ "لالظ / 11317ت 15353111 3 1 221111 11113 “م “رتلا “ر-" 2118112 لتتعاط 21 1ن[ 1١‏ »> 
<<" 01اع عد 19997 “ري عدت . 13 . ااوار ف : نرع 6" -215 301 لتاعا اه 

عع لاوات 

حد/ر "2-8 تج ت ص نت شطع : لتتع لطا ع رمع "حص ررم ع وورمه ‏ "قوري 1- طعت ع وم" اناق قورع 1126 مقع 8ه 

121112 “رع تتعنقتتء ملا 2112531515 45151> 

عمط ابره 

تلطه 


كن 5 452 يرك 


آنه د ادس 


22 م'موحيا يك قي عالم البىي اتش بي" عقطعهع حرطام2 > 


اا ل 


فم فم 
كت فر 


تيت لوطا ار > 
< للتتعا ا ار 


قَ[ز 
كر 


كما تلاحظ أعلاه قمنا بعمل اول كود في ال7117 ونأتي لشرحة : 


مام7> هذه اول اساسيات البي اتش بي عند اي كود تريد العمل عليه في البي اتش بي لابد ان تكتب علامة الاصغر وعلامة الاستفهام وحروف البي 
اتش بي كما تراه امامك ودون اي فراغ بينهم وهي علامة او شارة للسرفر بوجود كود بي اتش بي. 


' ' 11:0©© وتعني إخراج نتيجة أوشي معين أو أمر للسرفر بإخراج ما بين علامتي التنصيص (نحن طلبنا اخراج نص ترحيب كما نشاهد). 
: فاصلة منقوطة وتعني انتهاء الأمر وهي مهمة جدا وبدونها لا يتنفذ شيء بالإضافة لعلامتي التنصيص. 

<7 علامة الاستفهام وعلامة اكبر وهي تعني انتهاء كود البي اتش بي وهي مهمة أيضا. 

تنفيذ الصفحة : 


لتنفيذ الصفحة التي قمنا بعمل الكود فيها نقوم أولا بالحفظ ثم فتح (1:160://102111:056) تحت (5]ع21:06 550:01) ستجد المجلد (7611) الذي فيه 
صفحة الويب التي تبرمج فيه. نضغط على المجلد سيفتح لنا مباشرة الصفحة ((12016:.017) وستظهر النتيجة كما في الصورة التالية: 


مرحبا يك في عالم البي اتش بى 





0 0 00967 :ع |08 
لعلله . اة وكت زو “اإطفوة ا 0 00 1000 














أساسيات البي اتش بي (5 851 مبام) 


نضمين كود 2117 فى صححات الويب 
يمكنك الان تضمين اكواد البي اتش بي ضمن (10211) وهي ميزة مفيدة كوننا تعلمنا كيفية عمل الموقع كاملا بتنسيق ال(وو0) ونقوم الان بتضمين كود 
الرمام) ليضيف للموقع التفاعلية أي يحوله من ستاتيك الى تفاعلي. 


الكود المختصر لل(21112) 1285 -]:51101: 


في الكود السابق قمنا بعمل أول كود في البي اتش بي و شكلة العام او صيغته العامة كالتالي: 


لكن سيكون متعب اضافة (م1م) بعد كل علامة استفهام وعلامة أكبر (م1م7>) كما في الصورة أعلاه. سيكون لدينا الان كود مختصر لذلك وهو كما 
في الصورة التالية: 


اعم " فروجيا للك اليو الكوت المحختصر "اومر؟رطعم ا 


لاحظ حذفنا (017) من الكود. لكن هناك تعديل مهم في اعدادات السرفر (:5617©1 72337) لكي يتم قبول الكود المختصر علما ان بعض السرفرات لا 
تقبل او لا تعترف بالكود المختصر حتى السرفرات العامة على الانترنت لذلك لابد من تعديل في ملف 111زؤ.7ط171 الخاص بالسرفر لديك من خلال الخطوات 
التالية: 


الضغط بالماوس على ايقونة السرفر كما في الصورة والاختيار كما في الشكل أيضا: 


/ق للا رحاراء' زط 820 عونم 









2 مماكعع ا 
1 كل ماع برع 
« كممعمعمك ميرم ]| 


امتامطم 8 


وها ,ممع نزام | ظ 





ععع [برعكة ااثر )رةه 
كعع ع5 ااث مذ 
كعع رمك اآثر غردئوع ها 









|| كقيْة _العربية (اليمن) _- 


اونا غررم 


نضغط على الملف كما في الصورة أعلاه وستظهر الصورة التالية: 





11 0 00967 :|81 0/ا 
كله ليقت أعم.وأمطاعع0©1]مأ :اتهمع ‏ 772755202 2:00967 8|118 ١/0‏ 


ماعط بعالا +وصمرمع غزلغ علط 


(11111111665 5) 56601105 300 15 ]1012131 .5601105 كا (ع'كلاآ-60-©111ز)) 11125 أتدا. مرطام 0عتزلاء0 1151 101 111 : 


80 "0ن 0 





[ممطةا ‏ تأقط» فوع تساي 00 
د 00)10115) 13115113256 : 
1 

عوهع طع ناوالا 
.211 لك 111101 ©5[111 للا 1311511256 5تتأأم(تدء5 2112 عط 231 : 
لتأك لا /) 12 نام //:مااط ‏ 
0) ع عسزعررء 


لاعع155أ12 2006© ع7لتاعم0عع:1 1111 212 201 "01 "تعلاط 5ع ستساترءغء0 عتكلاعع:11ل قلط 1 
لاع 5'غ)1 .تأعتاة 35 5560ع21:0 ١‏ 5101110 تاعلط ؟؟ عع :"زنامة 218 35 355) <2 10رهة 72> ر 
310 ''أتاء ]01ظطة'' 35 ]51101 ©1[) 15 1101 5011 )13) كثلقء؟ 1ه خاع 525 101 1200ء للاشتامعع:1 ر 
115 20ع:521 7106 011 11)ز'آآ .21013 سأطسسنرمء 35) <-2 3110 «رطام” > لانا1 عط ع كنا 0) 12506620 : 
5117ق3ء عتتامع2 لتلوء 5151 ©1[) ر35 131151125 1م011 25 355) 11265 01 015 210 لالخ 01 : 
2115© 1 أتاظ .]0112© 510115 ©11) 11آ 2006© 1:0115؟5 ©11) 021:5[115 نا 20لا 2110 20111150 : 
للتاة ؟1اتاع"1"اتاء 1)'5 بع تتنل) 10115 3 تأعنا5 "101 ع:1011)ه12 3 تاعع6 135 أتاء اأتتمططاد قلطا د 

.11 1) 115 )"0011 5011 3113110تز0عع'1 :1551 أتاط ,2111115 ممرسنامء 31252105 101 0ع016 متناو : 
زه ]ااا 

١2111: 10‏ ألا تنزررماء :10 : 

: 2100111011 ١2111: ) 10 





0 نكيةنا ليا ا زالا زانا ننلاك 
اف دا اال انك 


.5 <-90 90> عا1تجاو- كن 1011لال : 
25-5 /)أ1. مطام//:مااط ‏ 
() - 2325_1355 


4 


كما تلاحظ أعلاه داخل ملف (11ؤة.مطام) اضغط على (21+8')) والتي تعني بحث داخل الملف ستظهر نافذة صغيرة كما في الصورة للبحث اكتب كلمة 
(5120:0) عندما تصل الى السطور المظللة تأكد من انها («0©) بدلا من (0146). 


قم بكتابة الكود المختصر أعلاه وجربه بدون (0[7) بعد علامة الاستفهام. كما في الكود التالي: 


22 م"مرحبا يبك قى عالم البى اتش بي" 2211215 تولات” > 
:2 ا ج"تعطة" مومه 27> 
<2 2" 10211015 115 ”لانن 511081" ضقطعع 22> 





كما تلاحظ في السطر ١١‏ اضفنا كود مختصر وستكون النتيجة كالآتي: 


مرحبا يك في عالم البى اتتس بي 
115 0201© 511081 


ملاحظة : لا فرق بين علامتي التنصيص 5 ') أو "١١‏ 0 


: 0-0 ”م /00967 :ع اا ١/08‏ 
ع .0 م طاععغ]. ثانالا نالا 


اتلك ت 160و اإطووة 2 00967 :2 ع اا8 لا 








6 » ٠+ 
نضمين عده اكواد ودمجها‎ 


يمكننا في ملف البي اتش بي دمج عدة أكواد في نفس الصفحة وهنا صورة عامة حول دمج الأكواد مع بعضها كما في الكود التالي: 


”42 . 1ه 1121 تق ةع - 11قاع اطع ,10110 ”1 لقاع تلع /11 “روعت . 13م . لاما : حزم عا" "ال هه 51 1ق صقع 1 3 221111-31 10113“ رعاةالا” ر-" 21181:1 لشغعط 1021321 ١‏ > 


1 

<<" لتتاطع 19997 لروعده . 3ه . تامار ثر : ووا عط" -25 لنهدع لتنتاطه | يم 

اع لاوا 2 

</ "2-87 ص ودنع وعقطع : 1لتطط ر رمج "عت ورت واورمه ‏ "موب 1- رت أودة"7 1-2 ياوه سواط وعا ماده 4 
<2:<*/112 : 'دورة السواقع الالكتروتية' صطعع حرطم عدع 21111 | ا 
سعط /ر» | د 

72 مضا 7 

2 ح 1 17-2-2014 "عم 252 دحررامة . 8 

:2 مج505 مطعه 228 15 ععهكت 5" ه10 جوة 5 

تيتقمط ري | الك 

<11231ر> ل انا 





لاحظ كيف اضفنا في السطر ه لعنوان الصفحة نص بواسطة البي اتش بي ضمن كود (12211). في السطر ١‏ قمنا بعمل كود (م711) واضفنا شيء جديد 
(©403) وهنا علامة الدولار عندما تسبق اي اسم هنا نسميه متغير (سنتعلمه لاحقا) علما انه عبارة عن مكان في الذاكرة نخزن فيه اي شيء. هنا 
اضفنا متغير ووضعنا أو خزنا فيه تاريخ معين. 

في السطر ؟ دمجنا كود بي اتش بي مع 131 كما تلاحظ ومعناه تعبيريا (اخرج لنا نص بالإنجليزي تاريخ اليوم هو) ثم بعد ذلك أمر بالبي اتش بي 


بإخراج ما في المتغير او ما هو مخزون فيه وهو التاريخ طبعا. وستكون النتيجة كالتالي: 


7-2-4 1 15 عثقك د'تقله 1 


تضمين التعليقات في الكود 


لعمل تعليق معين ضمن كود البي اتش بي نستخدم الإشارة ( /* .... */ ) وكما في الكود التالي: 


22 /ر* هتا تعليق */ ت'117-2-2014ع-ه36 50 حرطاجة > 
2 ممع ه50 صمطعهت 22 15 عع مك 35 ه21 حوره 

<< يلاخصط > 

أد تسغط > 





كما تلاحظ التعليق في سطر / أضفناه ضمن علامتي التعليق باللون البرتقالي. 


١/08 ||: 00967 0 0‏ 
الاكدا أ0.0أم داعع0©1م1 :اأهمع ‏ 772755202 2:00967 || ١/08‏ 





أنواع البيانات فى 5118 


هناك العديد من انواع البيانات تتعامل معها بي اتش بي ضمن اكوادها. منها الرقمية بأنواعها العادية والعشرية والمنطقية وغيرها نناقشها كلا على 


حذه: 


القيم المنطقية (صدء85001) 
نقصد بالقيم المنطقية هنا القيم التي تمثل الحقيقة ولها قيمتين فقط وهن (15216) وتعني نعم و (1'2196) وتعني لاء كما يمكننا استخدام الصفر بدلا من 
(©1"915) والرقم واحد بدلا من (130036). 
مثال: 
11 4<5 11 
:' 121:51 115 ' أمستتام معطا 


' لفتاتنلوء 01 عاعللدددده 115 ' أستتدم ع15] 


لاحظ مثال بسيط حول استخدام بسيط حول القيم المنطقية وشرح المثال في حالة كان الرقم الذي سيكون في 4 أكبر من ٠ه‏ إذا أخرج جملة (إنه أكبر) 
مالم اخرج جملة (انه أصغر او يساوي). لا تستخدم بكثرة في برمجة المواقع الالكترونية وغالبا ما تستخدم في لغات أخرى بكثرة مثل لغة (1713). 


+4» و 0 : 
قيم الاعداد الصحيحة (15ءع1268) 


هي الاعداد الصحيحة او الاعداد التي لا تحوي كسور مثل (”7177 )١‏ » (7؟١3).‏ 
قيم ال(1"1020): 
هي القيم والاعداد التي تحوي كسور وفواصل وتستخدم هذه القيم لحساب المسافات والقيم النقدية. 
قيم السلسلة (ع5):1): 
قيم تسلسلية من الاحرف او الارقام. مثل: (©1211511256 0105121111118 1224ع 15 2112) (١‏ 911"1:1:59© ). 
مثال في بي اتش بي : 
:' 715111 '-5112111©6 
: 0 610 


كما تلاحظ عرفنا متغير (4282) وخزنا فيه اسم (55035014) ويعتبر هنا من نوع (51138) وبعده طلبنا من خلال امر الاخراج بإعطائنا القيمة التي 
بداخل المتغير والاسم. 


0 0 00967 :ع |08 /ا 
لعلله . اه واكت01 زو «اإطيوة ا 0 00 1000 





البيانات المركبة (5عم17' 10212 01117011110)) 


من خلال تركيب البيانات نستطيع تجميع بيانات من نوع معين في اطار أو كيان واحد. 
المصفوفات (21125) 
المصفوفات ونستخدمها في تجميع عناصر من نوع معين فيها وترتيبها والرجوع إليها بطريقة محددة؛ وكل عنصر ضمن المصفوفة له رقم معين 
كمؤشر ويسمى المفتاح وهو رقم المكان الذي يوجد به العنصر ومن خلاله نصل للعنصر المطلوب وكأنها فهرس مثال على ذلك: 
''عدن'"' - [0] 91107111 
: '"صنعاء'' - [1] 4512107111 
: "الحديدة'"' - [2] ©9011 
من خلال المثال اعلاه قمنا بعمل مصفوفة اسمها (ع12107111) وهذه المصفوفة مرقمة من صفر الى مالا نهاية: 


ففي المثال [0]ع21:07122 يمكن تفسيره كالتالي ( المصفوفة ©2030 ذو المفتاح او المؤشر رقم ٠‏ يوجد فيها اسم عدن ) وهكذا يتم التعبير وفهم 
المصفوفات ومحتواها. 


المتغيرات (دع1721121) 
تبدأ المتغيرات دائما بعلامة الدولار (؟) والمتغير عبارة عن مكان في الذاكرة لخزن قيمة معينة سواء كانت رقم او نص او غيره. ويمكن تعريف المتغير 
بأي اسم امثلة على ذلك: 
' اتاكناك؟ 'ح عتاسدررة 
' 1:0 ' ح :1م1امن؟ 
' 2000 ' <ننو1و5؟ 
كما تلاحظ في المثال نقوم بعمل متغير بأي اسم وقبلة علامة الدولار إشارة للسرفر بأنه متغير ثم نضع ما نريده في المتغير. 
أنواع المتغيرات : المتغيرات نوعين (متغيرات محلية - ومتغيرات عامة ). 


طبعا في بعض المواقع الالكترونية او البرمجة بشكل عام تحتاج لتعريف متغيرات بكثرة وأحيانا المتغير تحتاجه في الصفحة كاملة ويتم تنفيذه كذلك في 
اي سطر في الصفحة هنا نسمي المتغير بالمتغير العام او الشامل (©7211211 210121)): بعض المتغيرات نحتاجها في جزئية معينة او لوظيفة محددة 
لذلك نعرفها داخل نطاق محدد لاستخدام التعريف للمتغير ونسمي المتغير هنا بالمتغير المحلي (5ع721:121 10021). 


١/1081: 00967 0 1‏ 
اه لفت أعم.هأملاعع]©0)م1 :اتهوسع ‏ 772755202 2:00967 |8 ١/0‏ 





التعبيرات (551005ع:1م:) 

نستخدم التعبير في البرمجة لتوجيه الصفحة او السرفر لعمل أمر معين ولابد من طريقة للتعبير عن ما نريد بتعبيرات محددة في البرمجة. وسنتعلم هنا 
بعض اساسيات التعبيرات المنطقية والرياضية. 

المُعاملات (01761:211015): 


هي تعبيرات عن مدخلات او قيم معروفة أو غير معروفة ويتم تعلمها في الرياضيات في المدارس (س) و (ص) أو (2) و (7) ونحن لنا استخدام مشابه 
من حيث المعنى او الشكل ولكن استخدامنا مختلف من حيث الغرض ايضا سهل ونستخدمها للحسابات وللقيم والتكرار فقط. هي نفسها متغيرات ولكن 
عند استخدامها رياضيا وحيازتها لقيمه وقيامها بمهمه معينة نسميها (076©12120). 


أمثلة ٠‏ 
0012110 عا 15 3؟ // تججو؟ 
5 :21 57212 21101 57211 ستاد؟ // :7212 + 57911 2 ددروة 


في السطر الأول ++40 متغير يقوم بعمل زيادة بمقدار واحد وهو تعبير ايضا يساوي 0+1 ؛ ايضا 85121 و509211 كلاهما يقومان بمهمة معينة بدون 
استخدام ارقام محددة وهنا تكمن الفائدة. 


العوامل (0061:26015): 


هي تعبيرات رياضية تقوم بعمل (224102) معين مثل الطرح الجمع الضرب وغيرها. والجدول التالي يحوي العوامل: 
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عقومانا8 /زأأ/انأقاءه55وم ]مأقرعم0 
تتملأة لأاسماكص]ز عع زان خاخ] مات | 
للم نامع داناك داملدعع رجور خلخ] )0( 
عتتتتكماع مع مدع 101 ] 
لتاق حتلم عمل متاك تتعترع د ,1 نالذا عس[خطااطا ,1 زالذا دنمعامم8 
101 ]ملا املاظ 
6015 بلتامتاقء [أأدرن نامر بحرم زأكلنزن] 
310 لاقع حرمت ,تامتاع تتتاحا ناك بحام نأل مف 
زع كخطتط) خطرت التطك بلاع1 أأتطاك 
0 لقنتوت 01 تتقطا تتمتهعكع ,تتقطا تعتهعرع ,من لمتتوع نده سقط ك5ع1 يصسقطا كودع ] 
0 لقنتوت أصط ك1 رمن لقع رع ل1 15 رما لقتدوع 1201 كا رما لقدادوع 15 
11ن) عساخطاط ,انلا عساشطااط ,الاالق عدا خا 8 
14ن) سقعامه8 ,لاألف صستهعامهخ 
813101 نه اتتمددرع 1 


-- در 1 ده د 
2ج--- 22 م - 


115 تزه اداع تدع زدقم 25-4 


آنا سدع اممظ ,آنا صسدمعاممظ ,ل[إكلخ دروع [اممق8 08 08 لام 


101 ممع لاماو5ع ]رن 





كما تلاحظ الجدول أعلاه يحوي عوامل كثيرة منها ما تعرفها مثل الجمع والطرح والقسمة ومنها ما هو تعبير منطقي مثل (4771) والتي تعني (و) 
وايضا (212) وتعني (أو) ونستخدمهما في المقارنات. 


عوامل الاأسناد أو التعيين (015غ07126 455151111721 ) 


عوامل الاسناد ونقصد بها العوامل التي تقوم بإسناد قيمة او بيانات لمتغير معين وتعرف ايضا بعوامل التعيين او الاسناد المختصرة. فمثلا لو أردنا عمل 
أمر للبرنامج بإضافة رقم معين وليكن ‏ هناك تعبير مختصر لذلك وهو (7- + 583) هنا أمرنا البرنامج أن يزيد القيمة الموجودة في المتغير 82 بمقدار 
لا 


وهنا جدول مشابه للمثال الذي ذكرناه: 


11111 0 00967 :|08 ا/ا 
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010 اعط3 ا 1 لنرة 

5 5ل13انع 53 1111م 5 - 53 

5 كتاآم 53 5ل3ن1انه 53 111 للع 111011-35 لمم 5 -+ 53 

ذ لاط لع نام النتتحط 53 قلقناوءع 53 جاع تمصع 3551 - دده هع تا من 81 5 -* 53 

5 انا 0ع10الل 53 كلقناوع 53 516111 1011151011-3551 5 -/ 53 

5 طااية؟ لعاقناعاةعررم د كلقناوع دأ 1ع تستدبجع 011-3551 1ق داع ادع حامر 5 -. هك 


العوامل المنطقية (0:5غ12ءم0 11081221) 
تعرفنا سابقا على العوامل الرياضية الطرح الجمع المساواة. هنا سنتعلم ايضا العوامل المنطقية وهي مشابهة للعوامل المنطقية الى حد ما وتلعب دور 
كبير في تطبيقات الرمطم) وتدعما في اتخاذ القرارات في تنفيذ اوامر صفحات الويب وفقا لقيم المتغيرات. مثال على ذلك: 

12151 15 7 (1:)110 "7<1 41/10 غ7<2 11 


أحد العوامل المنطقية هنا هي ((4101) وتعني (و) ويمكن التعبير عن المثال كتابيا (اذا كان اكس اكبر من 7 و سبعة اكبر من اف اخرج عبارة ٠‏ تكون 
الاكبر).وكما شاهدت مثال بسيط وتعبير بالعوامل المنطقية سهل جدا. وهنا جدول يعرض التعبيرات للعوامل المنطقية: 


010 اع36 ا مع 

عنتنا عقة تاد لحتة 53 طلامط 1ز عنصل”' #الذاءا ماك 8585 3؟ 
عنتنا عتة ماد لحنة د طتخمط كأ عنصل م[لظمق ماد ناللة 53 
علحط مت طك عدن 53 تعطاته ]أ نحن 01 مط || 3؟ 

15 تاو نذه 53 لاعطااء 11 عنتل”' 01 تاد 08 53 
أمم 15 53 1ز 16ل" 101 3 

1 أمم 15 53 زعتل 01 5 ١01‏ 

عنتنا 15 تاج تإلحاه نزه 53 تكلحاه كأ تحر" 08 115116[ع] مذ 08 3؟ 
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عوامل المساواة (5 07617201 180112117) 


عوامل المساواة كما في الجدول التالي تستخدم للمقارنة بين قيمتين واختبار التكافؤ بينهما. 


انا أاعطقا ع ةع 

أتاع لقا أناوع ع3 ناد ست 53 11 عن 1 0 لقداوع 15 0 2د وذ؟ك 

تاذ ما لقنتوع أمم 15 5 11 عد 1 من لقتاوع أمم 15 55 د! 3؟ك 

عمتا علحمقة علا عتتقط دك لحة هذ لدنة غخدرع لج تتتاوع عند طج لس د ]أ عنحل' 0غ لتك تاررعل1 15 50 عد ود 
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قواعد التحكم (دع11أع5:1 002601)) 


ضمن صفحات البرمجة توجد الاكواد التي تتحكم بصفحات الويب ضمن البرمجة وفي تنفيذ البرامج والتحكم بها من حيث التوقف والتكرار والشرط داخل 
الاكواد تحتاج لتعليمات أو اكواد برمجية نسميها هنا (5141111111:©5 00141:01)) قواعد التحكم وسنأخذها هنا بشكل مختصر كلا على حده. 


تعليمات الشرط (5 512161211 01:015101121)) 
نستخدم تعليمات الشرط للتحكم بالاكواد من حيث تحقق شروط يقابلها تنفيذ أمر معين وفي حالة المخالفة للشرط يكون هناك تنفيذ أمر آخر وهنا تكمن 
تعليمات الشرط ومنها: 


تعليمة 1) اداع مر غ52 11[ ع1 


بالعربية معناها (إذا كان) وهي الاكثر استخداما وسهولة في لغات البرمجة للتعليمات البرمجية الشرطية وصورتها العامة : 
(221:©55101<»©) 11 
( اأتاعطاءع)ج)5 ا 


كما تلااحظ التركيب العام او الصورة العامة للكود الخاص بالشرط. ومعناه هنا 02 وتعني إذا كان جملة الشرط (100ووع:201ء) متحققة فإن الأمر هو ) 
( 5]361212. وطبعا هذه صورة عامة وليست اوامر فعليه وسيكون لنا تطبيقات قادمة على ذلك في المواقع التي سننشنها. 


تعليمة (ع15ء) )512612612 ©15» ©1112 


جاءت تعليمة (»و1») تكملة لتعليمة (16) أي ان تعليم (12) تقوم بعمل شرط معين فإذا تحقق الشرط تم تنفيذ الأمر المعين منها. ولكن هنا حالة ناقصة في 
حالة لم يكن الشرط متحقق فلن يتم اتخاذ اي إجراء بديل لذلك جاءت هذه التعليمة تكملة لل() ومعناها (وإلا أو مالم). ومثال على ذلك: 


(221:©551011<»©) 11 
( 5266121212 عواء ( 151266111211 
وتعبيريا : إذا كان الشرط (1551012ء) متحقق قم بعمل الامر (5]26617©1261) مالم (عو1ء) قم بتنفيذ الامر (5]26612©7212). 
تعليمة وإلا اذا كان (7©12)0اء]5)2 ؟أءواء ع1) 


اخذنا مسبقا (1) و(©19©) ولو لاحظنا انهما يعملان على شرط واحد فقط. هنا لدينا تعليمة شرطية جديدة وهي (15©12©) وهي اضافة للشرط (12) ونعني 
هنا في حالة كان لدينا شرط معين وفحصنا هذا الشرط ودخلنا في أمر الشرط وكان لدينا شرط آخر ضمن الشرط الاول فإننا نستخدم هذه التعليمة لعمل 
شرط آخر ضمن الشرط الاول ومن خلال المثال التالي تتضح المسالة: 


11 )©»<521:©551011( 


) 512616111211 ( 


(10د5وع21دء) 1[ع15اء 
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١٠١ا/‎ 
+ 51216111212 ( 


( 5)2]612113 ! عوآء 


كما تلاحظ المثال أعلاه أضفنا التعليمة الشرطية 69 والشرط (1010كدع:1مدء) في حالة تحققه يتم تنفيذ الامر في (211عتماءع]5)2) ثم بعد ذلك اضفنا 
شرط مستند على الشرط السابق وهو (16ع15©) ويعني والا اذا كان (6©<201551011) الذي هو الشرط الثاني في حالة تحققه يقوم بتنفيذ تعليمة 
(5]2626212) مالم (»و1ء) ينفذ تعليمة او امر (5]26©12612:3). 


تعليمة التبديل )2ع تدع غ52 طء]ذيده عط1) 


تستخدم تعليمة التبديل (1ع5181) للمقارنة بين عدد كبير من القيم شاهد المثال: 


(52]80197) ه511 


©2356 6 '': 

''<01:10>/0؟7 ع2 21011110 6121115 7ق ك'أقط'11<م>""' ملاعء 
3 » 0 

:“ع5 0356© 

:''<([ل>ادنوع:101 9لك1اع77 ناولا <م>'' ماعء 

ب » 0 

:''15ا5201'' 2356© 

د ''</>د5ا1طع الطعطلط 52015 أوع])2.آ<م>"'' ماعء 

ةع 0 

:اولع 


و''<رلك>عة511 77 227 0) عسروعك '11<م>""' ملاعء 


من خلال المثال في السطر الاول افتتحنا بالتعليمة [ع57916 ثم العنصر (5034680137)) الذي سنقارنه بالشروط بداخل التعليمة 5571201 ثم ندخل 
مباشرة للسطر ” :'':1ع572)12" 3586© ومعناها ف حالة ما بداخل العخصر يساوي 1[ )2 نفذ التعليمة او الامر في السطر 54 ثم 21:21 ومعناها 
توقف. اذا لم يتحقق الشرط ينتقل للذي بعده. في حالة لم تتم الشروط كاملة يصل للأخير 1612111 وينفذ آخر تعليمة أو أمر. 
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تعليمات الحلقات او التكرار (5أ 562126 عأم1.00) 


تعليمات التكرار او الحلقات هي عملية تكرار لتعليمات محددة الى ان يتحقق شرط معين وهناك عدة تعليمات تعمل ضمن التكرار او الحلقة ومنها: 
تعليمة 117111 اع 2اع5]2 علتطر عط 1) 
(©11؟) معناها (عندما يكون) وتعمل على التكرار وبتنفيذ عدة تعليمات او اوامر بعد تحقق شرط معين وعند الانتهاء من هذا الشرط يتم الخروج منها 
والتعبير الرئيسي او العام لها كالتالي: 

(5101وع1جدء) علتطاىر 


1) 5621611215 ( 


كما تلاحظ الشكل العام ل771:116 وكأنها تقول للسرفر عندما يكون (1©551012م20©) نفذ لي (5]31611261205) التعليمات او الاوامر. 


تعليمة ع11ط7نا 00 2ع تدع غ562 عاتطتهه 0ل عط1) 
تعليمة ال1116؟7 00 تعمل نفس عمل الع77111 بخلاف أن الأولى تقوم بالتحقق من الشرط ثم التنفيذ أم 77111 00 تقوم بتنفيذ الاوامر او التعليمات ثم 
تنظر لتحقق الشرط فإن خالف الشرط توقفت وإن تحقفق الشرط واصلت تنفيذ التعليمات وصورتها العامة كالتالي: 
( 451266121215 00 
21:©551011(5<ع) علتط 


كما تلاحظ الصورة العامة ل1116؟7 00 في البداية أمر 010 وهي امر بالتنفيذ ل(9)26]611©165) تعليمات ثم »77111 عندما يكون أو يتحقق الشرط 
(621:©551012). في حالة عدم تحقق الشرط لا يرجع لعمل التعليمات مرة آخرى عند تحققه يرجع ل 00 وهكذا. 


تعليمة (101) 512611111 101 ع111) 
تعليمة ٠رم]‏ من أهم التعليمات التكرارية المستخدمة في البي اتش بي وغيرها من لغات البرامج وتقوم بعمل تكرار لعدة مرات بواسطة شروط محددة 
وصورتها العامة كالتالي: 

(7221"65510113© 7001655101125© 5510111ع01<») "101 


151216111225 ( 


كما تلاحظ تعليمة :0 أو حلقة م2 ثم ما بين القوسين 1:©5510111<ء الشرط الاول و01:©5510122زه الشرط الثاني و6©:01©59510113 الشرط الثالث 
ثم عمل التعليمات (9]21]6112©11:05). 
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الدوال (5دم1اء2نا) 


تساعد الدوال في إنجاء مهام كثيرة ضمن البرمجة بشكل عام وتحتوي لغة البي اتش بي من منات الدوال الجاهزة لتقوم بمهام محددة ومعينة. وهناك 
دوال ننشئها نحن لتقوم بمهام معينة وتعمل بالشكل التالي: 


لأن المواقع والبرامج احيانا تتطلب مهام مكررة ومعقدة اتت هذه الدوال لتحل هذه المشكلة ولتوفير الجهد ونقوم بعمل دالة وهذه الدالة نقوم بتعريف 
المتغيرات الخاصة بها مع المهمة التي ستقوم بها وتكون هذه الدالة في صفحة ويب ثم من أي مكان نريد عمل مهمه هذه الدالة نستدعيها فقط استدعاء 
ونعطيها المدخلات ولا نحتاج لعمل المهام في كل مرة وتعقيد الاكواد كلما تطلب الأمر. 


مثال على الدوال : 


دالة (0015): وهي دالة تقوم بحساب (أس الاساس) مثلا ه أس " يساوي ه8١١‏ لأن ه ضربناها في نفسها *" مرات حسب الأس كما تعلمناها في 
المدارس. قم بعمل الكود التالي داخل صفحة البي اتش بي وانظر النتيجة: 


22 م (3 , 5) تمر مل©طحم مدمد> ارك 


طبعا ستتساءل كيف تم ذلك وعلى أي أساس. دالة (7055) موجودة في لغة البي اتش بي دالة جاهزة مبرمجة وتعرف ماهي مهمتها ويقتصر علينا فقط 
استدعائها واعطائها المدخلات فقط. هذا مثال عام وبسيط حول الدوال وهناك دوال مهمه سنستخدمها فيما بعد في عملنا على المواقع بلغة البي اتش بي 
هذا بالنسبة للدوال الجاهزة نأتي إلى طريقة عمل دالة من عملنا نحن. 


القيام بإنشاء دالة واستدعائها 
سنقوم بإنشاء دالة تقوم بعملية حسابية وليكن عملية جمع مثلا سنقوم بعمل الدالة كما في الكود التالي: 


(ط5 ,53 مقت 1م61 ص تداع 2 
1 

م طظة ‏ + 55 - 55521 

'" لملقعمعة : لقعه12" مطعهم 

ْ 


(ا5 ,5 ) 53006 مط©طعم 
لم 





كما نلاحظ في السطر ١١‏ فتحنا لكود البي اتش بي بإشارة (7>) ثم قمنا بكتابة (4012131012) وهو أمر لعمل دالة ثم (2001) ومعناه اضافة او جمع نحن 
سمينا بهذا الاسم وهو متاح لأن تسمي ما شئت المهم أن لا تكون دالة محجوزة وموجودة في البي اتش بي ثم فتحنا قوسين بداخل القوسين (90 , 42) 
عرفنا متغيرات ج و 7 وفصلنا بينهما بفاصلة والمتغيرات هذه مهمه لأنه هي من ستستقبل المدخلات والقيم التي سنعطيها للدالة. 


في السطر ؛ ١‏ عرفنا متغير 90641 وهو المتغير الذين سنضع فيه مجموع المتغيرات 959 و 48 ثم قمنا بعمل جمع بين المتغيرات التي عرفناها. في 
السطر ١5‏ عملية إخراج الناتج وهو المجموع في 860681 ثم أغلقنا بالحاصرة ) عمل الدالة وهي مهمة لأن عمل ومهام الدالة تأتي بين الحاصرتين ( ) 
سطر ١‏ وسطر .١5‏ 


في سطر ١١‏ نستدعي الدالة 200 وندخل لها القيم المطلوب جمعها. طبق ولاحظ النتيجة. 


طبعا هناك دوال لها مهام أكبر وأكثر تعقيدا منها ما هو متخصص بالملفات وقواعد البيانات والنصوص وغيرها. 
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المصفوفات (2411:2575) 


المصفوفات (4112595) 


المصفوفات كما ذكرناها سابقا نستخدمها في تجميع عناصر من نوع معين فيها وترتيبها في متغير واحد فقط والرجوع إليها بطريقة محددة؛ وكل عنصر 
ضمن المصفوفة له رقم معين كمؤشر ويسمى المفتاح وهو رقم المكان الذي يوجد به العنصر ومن خلاله نصل للعنصر المطلوب وكأنها فهرس مثال 
على ذلك: 


و "عدن" - [0] عع متووسرطة 
و '"صنعاء'' - [1] ©911071116 
و "الحديدة'"' - [2] عع 1رورطة 
من خلال المثال اعلاه قمنا بعمل مصفوفة اسمها (ع1:093) وهذه المصفوفة مرقمة من صفر الى مالا نهاية: 


ففي المثال [0]ع21:07122 يمكن تفسيره كالتالي ( المصفوفة ع2::030 ذو المفتاح او المؤشر رقم ٠‏ يوجد فيها اسم عدن ) وهكذا يتم التعبير وفهم 
المصفوفات ومحتواها. 


إنشاء المصفوفات (21:295 ع متنادع"0) 
يمكننا إنشاء المصفوفات بسهولة وهي عن طريقة تعريف بسيط وادخال البيانات ضمن المصفوفة كما في الكود التالي: 

("3[صمصط ' , ' تعاموصط ' , " 1ع1[مصط ' ) بتوععة - وعامومطرهة 13 
كما تلاحظ أعلاه عرفنا متغير واسميناه 912001 ثم اسندنا له مصفوفة (2123) طبعا هي كلمة ثابته ثم قمنا بعمل الأقواس التي سيتم ادخال العناصر 


الخاصة بالمصفوفة داخلها وهم ('1001]1',6900112','001]3') ثم أغلقنا الكود بالفاصلة المنقوطة. هذه طريقة والتي شرحناها في البداية طريقة 
أخرى أيضا. 


هناك طرق لإخراج عناصر المصفوفة ومنها كما في الكود التالي: 


[0] قعاممطة مطعع 
"تعطة " ملاعهم 
[1] قعاممط5 مطعع 
"جتعطة " مق©!اعم 
: [2] قعاممطة مطعع 





كما تلاحظ في سطر ١ ١‏ قمنا بعمل أمر بإخراج العنصر في المكان ٠‏ الموجود في المصفوفة 4800125 وفي السطر ١5‏ عملنا سطر جديد كي لا تتقارب 
العناصر مع بعضها وفي سطر ١7‏ أمر بإخراج العنصر في المكان رقم ١‏ من المصفوفة 5860015 وهكذا. لو افترضنا ان لدينا ٠٠١‏ عنصر هل من 
المعقول ان نقوم بعمل سطر إخراج لكل عنصر. هنا يأتي حل آخر سهل جدا ومما تعلمناه مسبقا وهو عمل حلقة تكرار باستخدام ( 1م100 401) وعد 
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من ٠‏ الى ٠‏ وإخراج العناصر كاملة كما في الكود التالي: 
("تعامصط ' , ' تع[ممط ' , " 1ع[مصط " ) بتقععة - وعامومطهة 
+ (++عه :ع يعحدهيرة ع (احيرة ) عدن2 
[<5 ] سوعاممطة مطعه 


ع "؟جععرطهة " صقط©طعه 


1 





ع2 


في الكود السابق وكما تلاحظ استخدمنا أحد أدوات التكرار الشرطية. في السطر ١”‏ كما ذكرنا سابقا قمنا بعمل المصفوفة وعناصرها في المتغير 
55 عافي السطر ١5‏ قمنا بتعريف (607) وتعلم انها تقوم على ثلاثة شروط الأول وهو بداية العد وحددنا هنا أن يبدأ من الصفر لأن المصفوفة 
محتواها يبدأ من الصفر وحددنا بالمتغير 8-0 ثم الشرط الثاني وهو إلى كم نريد العد والتنفيذ وحددنا إلى أن يصبح أصغر أو يساوي ؟ لآن العناصر 
لدينا هي إلى " في المصفوفة. 


الشرط الثالث حددنا أن يزداد المتغير :4 بمقدار واحد في كل تنفيذ حتى يتم المرور للعناصر في المصفوفة بداية من الصفر ثم يزداد واحد في كل مرة. 
في السطر 75 كتبنا :[::؟ ]4510015 مطع» وتعني إخراج العنصر في المتغير 91001 للمصفوفة رقم عد » طبعا لاحظ في البداية تساوي ٠‏ في 
المرحلة الأولى فتقوم ال(0؟) بإخراج العنصر في المكان صفر في المصفوفة. 


في الخطوة الثانية يزداد اله بمقدار واحد إضافة للصفر ويكون قيمة ال يساوي واحد فتقوم ال(::م/) بإخراج العنصر في المكان رقم ١‏ في 
المصفوفة. 

المرحلة الثالثة يزداد الز4 بمقدار واحد فيصبح قيمته ؟ فتقوم ال(2م/) بإخراج العنصر في المكان " في المصفوفة في المتغير ع98001. ثم تأتي 
المرحلة الرابعة ويزداد اله بمقدار ١‏ فتكون القيم تساوي ” فتقوم ال:زم/ بإيقاف العمل لأن " التي هي قيمة ال2ة لا تتوافق مع الشرط 2->: 
فتتوقف ال:رم0/ عن العمل وينتقل السرفر لما بعد ال#01 ويخرج منها. طبعا لم نذكر محتوى السطر ١١‏ وبديهيا ستعرف ان ال501 تقوم بعمل سطر جديد 
في كل مرحلة وستكون النتيجة كالتالي: 


[عامصط 
لعأمصط 


تعامهما 
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نماذج الإدخال (5ه" .1111/1) 


نماذج الإدخال أو الزكدمده"1 1111]): من الأدوات الهامة التي تقوم بتمرير البيانات من صفحات البي اتش بي واكاسدخط إلى السرفر أو قواعد 
البيانات. ونعرف جميعا هذه النماذج التي نستخدمها في مواقع الانترنت عند إدخال البيانات أو الخيارات وسنتناول هنا النماذج لكي نستفيد منها في 
تطبيقاتنا في البي اتش بي لأنها اساس اللغة التفاعلية. والصورة العامة للفورم أو النموذج كالتالي: 


>10111< 
110111 215 
>/101120< 


كما تلاحظ السطر الأول فتحنا كود الفورم وفي السطر الثاني نص يعبر عن نوع الإدخال ربما يكون نص أو اختيار أو تعليق وما إلى ذلك وفي السطر 
الثالث أغلقنا الفورم. 


حقول الخص (105ء1! از 1) 


>11 1712- '')6»<]''< 


حيث 111 معناه برمجيا اداة ادخال و 670 النوع ومن خلاله نحدد نوع الإدخال هنا في المثال حددنا )ججع) ويعني نص سيكون اسم أو أي نص 
عادي. سنقوم الأن بإنشاء فورم وبداخله حقول نص 175610 166 وكما في المثال التالي: 


> 101111 

دير عدطة << 211251117127 7 -2 مم | "عاعرمع "عدم ريع تطاتائرت 23  :‏ عنودلا 
“ا 11717 35 1 7 تقد "طعدم ع" عدم زياع لانتامط 21 م11 ما 
205111 ره 





كما تلاحظ في الكود أو المثال السابق في السطر ١١‏ تم افتتاح الفورم » في السطر ؟١‏ كتبنا نص عادي : عد«رجروآ<3 ومعناه الاسم ثم بدأنا بعمل الحقل 
الخاص بالاسم وكتبنا بين علامتي (</ > ) كود الحقل ]1711 ثم عرفنا نوعه '"')جه)'-27776) من خلال الخاصية ع7 و )202 تعني نص. ثم اضفنا 
خاصية ال122110 وهي خاصية لتعريف اسم الحقل وهي ميزة مهمه للمبرمج للتمييز بين الحقول وهنا سمينا الحقل 1175625126 من دون فراغات وهي 
تسمية منا نسميه كما نريد كتلميح باسم الحقل ثم أغلقنا حق الادخال. 


في السطر”١‏ نفس العملية السابقة كتبنا نص عادي :713:36 1,356 ثم حقل الإدخال وعرفنا نوعه على انه نص ثم اضفنا له الاسم الذي نريده ثم أغلقنا 
الحقل. وهنا نصل لنهاية الفورم في السطر ؛ ١‏ ونغلقه. وستكون النتيجة بعد التطبيق والحفظ كالتالي: 


-١‏ عتصوكز 


- عتتقق أ 1351[ 


أنواع الحقول : طبعا هناك أنواع للحقول بالنسبة للمدخلات فهناك النص العادي (0»]) كما في المثال وهناك البريد الالكتروني (2231©) وهناك كلمة 
مرور (02595901:01). لذلك تلاحظ أحيانا أن المواقع لا تقبل منك الايميل الذي تدخله بشكل خاطئ او متحايل. ايضا كلمة المرور عند كتابتها لا تظهر 
الأحرف. قم بتجربة الأنواع المذكورة بدلا من )زع) ولاحظ الفرق. 
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١١ * 
عٍِ‎ 


أزرار اللزهنلجج ) 


ايضا من انواع ادوات الادخال (1811:140:25 1+20110) وصورتها العامة : 
<''2010"'' -17 11110111 > 
وتستخدم للاختيار الوحيد من بين الخيارات مثل خيارات ذكر وأنثى شاهد تطبيق الكود: 


> 1001111 

5: 

57751115-51-7512 "جرنه "1110-7م م "250157 "م و :22111 1 > 

2 لضققة 1<" 2 ل شتنرة 2 ”7 -116 51م "يرمق "حدم رمم "ان 1 جوع "عدوي 1112111 > 
<1211 20 “رع 





من خلال الكود أعلاه تم عمل الفورم الخاص بال17111401 8010 في سطر ١7‏ فتح الفورم »السطر ١8‏ كتبنا نص عادي يشير الى بيانات الازرار نفسها 
وكتبنا الجنس (9©2) أو النوع »في السطر ١5‏ بدأنا بعمل ازرار الراديو كتبنا غ1:1ممرة> ثم حددنا النوع 72010 ثم الاسم ثم الأهم القيمة (21016؟) لاحظ 
في الحقل الخاص بالنص لم نضفها .لماذا؟ لأن النص الذي سيكتبه الشخص في الحقل هو القيمة (»7811) أما هنا فقط سيكون المتاح هو الاختيار لذلك 
نضع القيمة نحن فنضع هنا القيمة تساوي (723216) وتعني ذكر وتخزن في الزر نفسه وفي حالة تم الاختيار عليه تقوم قاعدة البيانات باستقبال القيمة 
(©3112؟) وهي الذكر . ثم نغلق الزر الأول. ثم في الأخير كتبنا نص عادي للشخص ليفهم أن الخيار هو للذكر ©7121. 


في السطر ٠‏ بنفس فكرة الخيار الأول مع اختلاف قيمة الزر (©561321)» ثم أغلقنا الفورم في سطر ."١‏ سيكو الشكل كما في الصورة : 


علقددع 2ط انا عم[وابا ا*ا عومج 


خيارات الزوءع:0ك1ءعع1)) 


تسمح للمستخدم بالاختيار أو عدم الاختيار من الخيارات المتاحة وصورتها العامة: 
<''1©©12072؟'' -172 11> 


نستخدم خيارات (:50ع012601) لعمل استبيانات أو أخذ معلومات بسهولة من المستخدم ولدينا مثال هما حول كيفية عملها وهو سؤال عن وسيلة 
المواصلات مثلا وكما في الكود التالي: 


> 101211 

: 2 من 5 تمع 1 

وهر ""اعروعج "عدن وجي "الومطعاح فاح "عم رودم ""بومطاح صمورع "حدم ريت لاتاترة 1 > 
ع1 81< /ر "امع 1ط" -115 هدم "بومططاع فرح "عدم رمم ""بومطاح مراع "عدم ريت باتاترد 1 > 
201113 “رجه 





بنفس آلية عمل الأدوات والأزرار السابقة في السطر "5 بدأنا فتح الفورم »في السطر ؛ ؟ كتبنا نص عادي للإشارة إلى المطلوب من الاختيارات وكتبنا 
(1:2115011)) وتعني وسيلة مواصلات. في السطر 5" بدأنا عمل الخيارات اخترنا النوع (:0كاععطء) ثم الاسم ثم القيمة وهي ألأهم هنا ووضصعنا 
القيمة (027) وتعني سيارة ثم أغلقنا الاختيار وبعده كتبنا نص عادي بأن الخيار يخص السيارة. في السطر 76 تم عمل الخيار الثاني بنفس طريقة الأول 
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باختلاف القيمة والتي هي(عع11) وتعني دراجة هوائية ثم أغلقنا الخيارء واتبعناها بالاسم 1311 للإشارة لاسم الخيار أو قيمته. وسيكون شكل الخيارات 
كالتالى: 


2. 


ععلاظ لا عهن) نا عتم وكسة: 1 


زر الإرسال (00غن8 غتسططن5) 


نقوم بإرسال البيانات إلى السرفر عن طريق زر الإرسال ويكون الزر موجود ضمن الفورم لأي أدوات إدخال سواء حقول نص أو خيارات أو بحث أو 
غيرها. وصورته العامة: 


>11 15712- ''51111211''< 


يكون الإرسال بعد الضغط على الزر إرسال (210:طاناة) فيقوم بعمل إرسال جميع بيانات الحقول او الاختيارات إلى ملف الأكشن في بداية الفورم (لم 
نتطرق اليه) وكما في الكود التالي: 


<" 321” ->1:110501 112 ”2112 11031_31-1313 05 3211511-12 "اناد 1 "- 1212112 1051211 
<"” عم 115" ترم م "عيرم " حتم و1 انا 1+ : عنتقم ع2م 3لا 

2" 11-1طظن1 5 " -77211112 "ما لتتطددع "عم 111ا11- 

201217 ره 





من خلال الفورم أعلاه » في السطر "١‏ تم فتح فورم تم تسمية الفورم ب116م1ؤ ثم خاصية :20101 والتي تحدد الصفحة التي ستقوم باستقبال البيانات 
وهي «طم.2)102_دمزم؟ ثم عمل خاصية 226)1200 والتي تحدد الدالة التي يتقوم بأخذ بيانات (سنتطرق لها لاحقا). 


في السطر ”“" تم عمل نص عادي ©2311 11961 ثم بدأنا بعمل الحقل لعمل نص معين مع النوع والاسمء في السطر ”*" نقوم بعمل الزر (210ددطنا؟) 
حددنا النوع ب(501121) ثم القيمة وحددنا (505216) ايضا ويمكنك تغييرها بالعربي إن شنت. ثم أغلقنا الفورم. وسيكون كما في الشكل التالي: 


ملاحظة : في حالة عدم كتابة اله79[11 للزر بشكل أتوماتيكي يتم إنشاءها في المتصفح وباللغة العربية إذا كان متصفحك عربي وباللغة الإنجليزية إذا 
كان انجليزي وهكذا حسب لغة المتصفح الذي تستخدمه. 


الكائمة المتنسدلةُ (1150 01:02-00111) 
من الأدوات الهامة في الصفحات التفاعلية والتي تتيح للمستخدم الاختيار من بين القائمة المنسدلة والصورة العامة كالتالي: 


<اع»5©16> 


<22©122>/0111011اء لآ <'' لاع ددرع؟'' -21116؟ 0711011> 


<اع»5©»1/> 
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كما تلاحظ الصورة العامة للكود نبدأها بال<)960160> ثم نبدأ بإضافة العناصر التي ستظهر للمستخدم من خلال كود <0711011> هنا قمنا بعمل الخيار ثم 
القيمة وعينا («رعدمه7) ثم إغلاق البادئة ل<071101> ثم النص الذي سيظهر للمستخدم ثم إغلاق ال00410» ثم كتبنا النص الذي سيظهر للمستخدم 
(22ء587) وهي التي ستظهر للمستخدم, ثم أغلقنا ال::0010 » إذا اردنا زيادة خيارات نكرر ال:071410 في السطر الأخير نغلق ال6عع1عو. وكما في 
الكود التالي: 


10312112 
ه5615 > 
125122 عا نزت “ر متاك لمق " رم ق 551115-7 52 1ض تزه > 
021121 “3 "7 258133 "قققة 551112-75 1ت 1 ]تزه > 
1523 زه “ر #طط 1< "”طط 531112-73 2ت 1 ]تزه > 
هت 1 عانزت “2 7731 قلق11< "” 1 1 تطهده"-51115 هت 1 ]دزت > 
تع 22 51ق ره 
013 م2 /ى »> 





كما تلاحظ الكود بدأنا بفتح الفورم ثم بدأنا بعمل القائمة المنسدلة <961600> ثم عملنا الخيارات عن طريق 0014102 وإدخال القيم والنصوص التي 
ستظهر للمتصفح .ثم إغلاق القائمة المنسدلة <]»9616/> ثم أغلاق الفورم. 


سيكون شكل القائمة كالتالي: 


5-5233 
”ط©طا 
شتا3 اذا 





منطقة الخص (2262 غ2:ء]) 


نستخدم ال4©<621©2 للنصوص المطولة والتي نلاحظها في المواقع مثل التعليقات مثلا نضع التعليق في الحقل المناسب ويسمى ب2162 1©<1 وصورته 


5 


العامك: 


ح''..''-015© ->1*0715 131:62:© > 


كما تلاحظ الصورة العامة بدأنا بكود ©21]::©)> ثم خاصية 10595 وهي لتعيين عدد الصفوف وثم 2019 وتعني عدد الأعمدة. وكما في الكود التالي: 


> 103121117 

"ةق "حو زون ‏ "3-5 تراوع 1‏ تح 11ت > 
اكتف التص هتا 

تدع 2 د عجره ب > 

213 م2 “رج 





كما تللاحظ الكود أعلاه في السطر ؛ ثم البدء بعمل الفورم ثم في سطر 58 البدء بالج7:2121:0©) وتم تعيين عدد الصفوف ؟"5''-015) وحددنا خمسة 
صفوف عملنا خاصية عدد الاعمدة ايضا ('"40'-2»015) وأغلقنا البادئة. في السطر 549 عملنا نص كملاحظة للمتصفح ويمكن عدم كتابتهاء في السطر 
٠‏ أغلقنا الوع:0<)8 والسطر ١ه‏ أغلقنا الفورم. وسيكون شكله كما في الصورة: 
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اكتب القتص هتا 


دالة 52051 و9 6151_؟ 


دالة '171©_؟ 


نستخدم هذه الدالة لتمرير البيانات من صفحة إلى آخري بكل سهولة عن طريق استقبال البيانات عبر المتغيرات وفيما يلي مثال حول كيفية نقل البيانات 
واستقبال الدالة '8_)7171 لهذه البيانات علما أن البيانات التي تنقلها لصفحة آخرى تكون ظاهرة في رابط الصفحة بعد التمرير وهو الفرق بينها وبين 
1 ذ. 


سنقوم بعمل تمرير لبيانات من خلال صفحة فيها فورم يحتوي حقل للاسم والبريد الإلكتروني وهذا الفورم يوجه هذه البيانات لصحفة أخرى فيها دالة 
27 ه تستقبل هذه البيانات وتعرضها للمستخدم وستكون بالطريقة التالية : 


أولا : ننشأ مجلد داخل ال777957 ونسميه )عع أو أي اسم ونقوم بعمل صفحة جديد ولتكن «[طم.22»1م»77»1 في برنامج الدريم ويفر والكود فيها 
كالتالى: 


6 





”05 . 3253113513131 2ط - 2011 تلع “رذآ 101 1# قتاع تلم 7# 1 أروعده . 73 . امهم فر ثر : توعا اط" "لظ م 7 2531115131هع 21 ا . 1 22111 10110 م “2ةللا/ #-" 2118112 لتتعاط 000213521[ اي 
<<" ل1تتتطع 195599 “روعده . 73 . السو “ر : نرع 5" -125مه لسعاطهع 
<3 12> 
د/ "2-8 1حتئع مععت قط 2 2101 ريمع ""عتج يرت ع رمه "موي 11ت ع رودت" -1 ناوه ورعاطاط وع مده 
<112ع 17 اده 511ه» 
لاع تام ارات 
1100-73-27 11:2 "تلام . عنتتوج 1ل ع2" -15121 51 101211 > 
<< اط " صووع 11" 1112م م "دمع "" عتموري1 6 عالاحرص 1ج : عسروداير 
«عط 2<" 1 ل شنته "حم رمم "عومج "حدم يتن امت 21> : 1ل لهس كا 3 
1127نت "17 1120111 > 11 
تساع م2 “رع 11 
00572 > 12 
مط رج | عه 
< 1 ماط ”> لل 5 


خن 2 22 رف ره 5 دض 


هذا الكود في صفحة م77100111.71 وكما تلاحظ فورم عادي كما تعلمناه مسبقا والمهم هنا أن تلاحظ الخاصية 1ر210 في سطر 7 حددنا اتجاه 
تمرير البيانات وستذهب إلى صفحة طام.»116م»77212 »حددنا الطريقة 21611200 وهذه الخاصية تطلب منك الطريقة ونحن حددنا طريقة أو دالة 
'0177))_ه كما تلاحظ. وهي صفحة أخرى سنقوم بعملهاء وايضا مهم ان تلاحظ خواص ال©222ج2, للحقلين جعلنا لكل منهما اسم احدهما 221:16 والآخر 
نوه ويعملان بنفس طريقة المتغيرات يتم خزن البيانات التي سندخلها فيها. وسيكون شكلها عند التنفيذ كما في الصورة: 


1ق ا 
1-1 
| انبسك | 


ثانيا : نقوم الآن بعمل الصفحة الثانية [1م.ع77612012 ايضا بجانب الصفحة السابقة في مجلد )عم و سيكون فيها دالة '8_021731 وكما في الكود 
التالي: 


0 0 00967 :ع |8 ١/0‏ 
لعلله . اه واكت01 زو «اإطيوة ا 0 00 1000 





34237 . 3331ت 311231 35ت 2ع 1 لقعا تلعة “انا 101 “7 311ع تلع 8 1 “رن عدت . 73 . توما أ :نوع عط" "لالظ /, 125315315151131 1.1 2221111 1011“ “تاذلا “ر-" ا1ءاظلا2 لتقتعط 21 0015 ١‏ > 01 
< " لتع تعد “1999 ري عدت . 73 . او ثر : قرع 5"-5 01 قتع اه 2 

5 11233 

</ر "2-87 12ت ت تق تقلع : لاط رععسمع "عت ورم ع ومه ‏ " مور 5-1 لقت عأ وود2 "1-7 اق قوط 3ع 8 1ه 3 

1112 ثر > عندده 1ع 21115 2 ا 

<مدع 1ط | كت 

دطمحع2 [ ""عتتقط" ] 1كات ؟ مطعهة حرطدرة جه منردوح 1ر دالا 7 

مرخ 1" 11ههك" ] 1ظنا _؟ قطعهة تتطم*2 2 :135 3002255 لاداقشدء عنات 11 0 

العرااء هاه 3 
حاط “رج 0 





11101 ره 
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لاحظ في الكود سطر " كتبنا نص عادي وهو 77610036 وبعده كتبنا كود بي اتش بي وطلبنا إحضار ما داخل ال28::6 وهو الخاص بالحقل الاول 
الذي سيكون فيها الاسم واستخدمنا طريقة الدالة '4_)71771 لإحضار البيانات الخاص بحقل الاسم لاحظ طريقة الكتابة بالخاصية '4_©:171 

نضع قوسين وفاصلتين منقوطتين بينهما وبين الفاصلتين المتغير ثم بعد القوسين فاصلة منقوطة ونغلق كود البي اتش بي. وكل حرف وكل فاصلة دائما 
مهمه جدا. في السطر ١‏ كتبنا سطر عادي :1 20017155 122211© 570111 وتعني عنوان بريدك الالكتروني هوء وثم قمنا بعمل كود بي اتش بي وكتبنا 


بداخلة تفس الكود السابق وطلبنا إخراج ما بداخل المتغير 1311© من خلال الدالة '8_©1971 ثم أغلقنا كود البي اتش بي. 


التطبيق : نفتح من خلال المتصفح صفحة 117م.7761001261 في مجلد )مع من السرفر وطبعا ستظهر كما في الشكل التالي بعد اضافة الاسم والايميل 
كمثال ٠‏ 


يوسف صالح| -33136!آ 
لمع 05/300 القلمع | التقدد- ذا 


| إرسال | 


بعد الضغط على الزر ارسال ستقوم الصفحة بإرسال البيانات الى الصفحة الثانية م1م.77610013 واستدعائها لأخذ البيانات وهي بدورة ستقوم بتنفيذ 
النقل للبيانات كما كتبنا الكود بواسطة '5_)7171 وسيكون شكلها بعد ضغط زر الارسال كالتالي : 


يوسق صالح عدومعاء 177 


امت و مله( التقحدع :15 ددع ملل للنقتداء كناه 1 


ولاحظ أيضا كيف يظهر الرابط عند استخدام دالة '8_©157 البيانات التي قمنا بإدخالها ظهرت ضمن الرابط كما في الصورة : 


نا تامء.ههطة/31196401 جرع -7311ع8 يوسف + صالح - 7037م امع تمع اع نثاراء و/1طاع رياد هطاةءها 7-7 نض 


دالة '20051_؟ 


يتم إرسال البيانات من الفورم إلى صفحة أخرى عن طريق دالة 225719 وتكون البيانات غير مرئية للمتصفح عكس دالة '8_0191 لدينا المثال 
التالى: 


نطبق على المثال السابق فقط نغير بدل (561) في صفحة [م. 771201161 كما في الكود التالي: 


:"دوج" > ل مع 112 "ترتاج . عتتمتج لهي" -521 32121 2012111 > 
1122 520127 551112-15 "اعاعوم ع "حدم ورين لاتامخ 1 > : حنتهلا 
نعط <<" 1 1 هته "" حم نتمم "عأعوهد ع "عدم وري 6 لاتاصخ 1 : ل دهم- خآ 
لتنا "حم ري 22111 1+ 

> 7 201112 


0 0 00967 :ع |8 ١/0‏ 
لعلله . اه وت 1601و #اإطيوة ا 0 00 ا 10000 








١1١7 


كما في السطر ‏ قمنا بتغيير الخاصية 72:6)1200 إلى 7054 . وفي الصفحة ام. »2م712 نقوم بتغيير الدالة نفسها من '8_©171© إلى الدالة 
7 + كما في الصورة التالية: 







عط مم2 : [ "عشتقمد" ] 2051 5 مطعهع حرطم > عرورووح لزعلا " 
2 "11هسة"] 2051 ؟ مقطعه نترطم”ة 2 :15 55عع500 11هنده نات 1 85 


لعرتاء سه اها 3 


كما تلاحظ الصورة تم تغيير الدالة وسيكون التطبيق بنفس التطبيق للمثال السابق وسيكون شكل الرابط بعكس دالة '8_07171© أي لن تظهر البيانات في 
الرابط . لاحظ الصورة: 


_ 9 5 مام .عصممعاعبمتباعو/1طع دو هطاةعها 


لم تظهر البيانات التي أدخلناها في الصفحة المستقبلة لبيانات الفورم وظهر اسم الصفحة فقط مبطم.عتامع1ع:7. 
تطبيق حسابي باستخدام الدوال والفورم 


سنقوم بعمل تطبيق لعملية حسابية عن طريق الفورم الذي تعلمناه والتطبيق يقوم بعمل جمع ارقام يقوم المستخدم بإدخالها وتقوم الدالة '5_260051 أو 
17 +ه بعمل التطبيق الحسابي وإخراج النتيجة والطريقة كالتالي: 


اولا: نقوم بعمل مجلد جديد داخل مجلد 77797 ونسميه 110801011م7 . نقوم بإنشاء صفحة بي اتش بي 200.01 ونقوم بعمل الكود التالي بداخلها. 


"2 2ن"" 1 11:2 "تلاج . 5002" رت 5211 لدت 1ج 

أدخحل الرقمين لعملية الجمع 

جم عدطهة 

< ”ب ”23112-75131701 1107" 2-7 رياط نادرق 21 :1 عع تتستتط 
<< “ا "71137112  2137112-‏ 107" 2 اط 21115 : كم عرع طستتط 
<< /, "ا تنتطتددع ”عم ورياع طاتادرن 1 > 

201211 رع 





كما تلاحظ قمنا بعمل فورم لعملية الجمع ووضعنا خاصية الأكشن 200101 للتوجه لصفحة أخرى وهذه الصفحة تقوم بعملية سحب البيانات والقيام 
بعملية الجمع؛ حددنا اسم الصفحة وهي 2002.517 سنقوم بعملها في الخطوة التالية. في السطر / عمل نص عادي والسطر ؟ عمل سطر جديد. في 
السطر ٠١‏ نص عادي في البداية وسميناه :1 :21137061 اشارة للرقم الاول ثم بدأنا بعمل حق من نوع :21 وليس نصء وحددنا اسم للحقل وهو 
1 وهي الخاصية التي نتعامل معها في نقل القيم دائما من خلال الاسم. وسيكون الشكل كما في الصورة: 


أدخل الرقمين لعملية الجمع 


| إرسال | مت م11 1 تناز 


ثانيا : نقوم بعمل الصفحة 1م.201012 ونقوم بعملية جلب المتغيرات للحقول والقيام بعملية الجمع كما في الكود التالي: 


0 0 00967 :ع |08 
لعلله . اة وكت زو “اإطفوة ا 0 00 1000 











التتيجة 
ج/ر عدطة> 
امتتادز2 > 
1" تشتتد” ] 61:1)_ 9ع عه 
[ " عستتط” ] 01 ©- | 


عطة + ده -5 1 1ردمعر د 
1 

2 هخ 5 م؟©طعم 

0 





عت 


في الكود أعلاه في السطر ٠‏ عمل نص عادي وكتبنا (النتيجة) وعمل سطر جديد في السطر ١‏ » في السطر ؛ بدأنا بعمل كود بي اتش بي .في السطر 
٠‏ عملنا متغيرين هما 49 و 98 وكل متغير استخدمنا فيه عملية جلب للبيانات او القيم من خلال الدالة '48_02171 فمثلا المتغير 9 استقبل البيانات في 
المتغير 12131111 »والمتغير 81 كذلك استقبل القيمة في 11111112 . 


في السطر ١7‏ عملنا متغير وسميناه 9150316 ومعناه نتيجة وجعلناه يحتوي مجموعة 89 و 48 وداخل القوسين في سطر ١5‏ طلبنا إخراج النتيجة 
(41:651116) والتي تحوي مجموع المتغيرين. وأغلقنا البي اتش بي في سطر .١١‏ 


نأتي للتطبيق ونضع الرقمين ٠٠١‏ و 55١‏ ونطبق على صفحة «[طام.200 كما في الصورة : 


أدخل الرقمين لعملية الجمع 
5-5 250 :2 11111121 2010 :1 11111121 

نضغط على زر ارسال وستظهر النتيجة التالية كما في الصورة : 
5ك 


!ا 211 :111501 


01 : نظام مفتوح المصدر ومجاني لإدارة قواعد البيانات العلائقية ويستخدم لغة الاستعلام الهيكلية ,5001 ( 0002177 :5101001011 
28112586 ]) وتعتبر ,5001 اللغة الأكثر أهمية في إدارة ومعالجة محتوى قاعدة البيانات. 


قواعد بيانات علائقية: وتعني جداول مترابطة بواسطة علاقات (7©121105) عن طريق مفاتيح رئيسية للجداول. 


سنتعلم هنا طريقة عمل قواعد بيانات وجداول وطريقة إدخال وتعديل البيانات بداية من ال12232):2111مطام ثم نقوم بتعلم كيفية إدخال البيانات وتعديلها 
وحذفها من خلال البي اتش بي وإنشاء مواقع تفاعلية تعمل بال بي اتش بي وقواعد البيانات 12350]1 . 


ماهو 1111د:[)01011152 : هي اداة مفتوحة المصدر ومجانية تتنيح لمدراء المواقع الالكترونية لإدارة قواعد بياناتهم (11550]1) 
الواجهة الرئيسية ل «زدد71211252)[1 


نقوم بتشغيل برنامج ال:1ع311756©17؟7 حتى تظهر الأيقونة الخاصة به في الشريط السفلي لسطح المكتب باللون الأخضر. ونقوم بفتح 102110514 
ايضا على المتصفح كما في الصورة التالية: 


١/1081: 00967 0 1‏ 
اه لفت أعم.هأملاعع]©0)م1 :اتهوسع ‏ 772755202 2:00967 |8 ١/0‏ 





ماع برع 5م ماق /الا 
عكتهومد5 ممتد لا 2.2 ومند ٠‏ 
011 ) نع رحرع5ك 


2 :(روتلوزعنا عداعدمم 
73 :[[وتورع/ا مبزم 


عمك داق +07_حررمه ماق دلمعاى طاو م ططق ععنك دزأق ‏ : كرمتكمعغيع 0م1030 
كد ططق مت اق عاق داق وعءء داق ع:03 ططق 
عطن0 ططزأق امك ططق م ج16 لاق 100 ططق لم6 طق 
0 اوك ته اق 000 ةك داق مواددع5 ططأق مولع لعج طاو ععم داق 
درول ططق الودطانا ماق نازاج داق مح داق عع زررععان ماق 
ادن ططق ل ل اا مق لاع ا محم زك داق داع ططق ومع ططق 
00 ططق دلق عام ةط 2ع ومح ططق اع رحد ططق مدع دود مواق 
ةطاح ططأق ع]أاوك_ملم داق اودلزحص_ملم داق أأودزدى اق اودتزتى اق 
وناحاء 60 مزق 


4 : نوعلا 01كلزال! 


1005 
(60كمتمحام فق 
منحل د زدرمدام فق 


5أعع[20 'زباولا 
“2011 كا 
متاأدعتاممد 1 








من خلال الصورة أعلاه ستلاحظ على اليسار تحت عنوان 1019 وجود رابط لد دده نمام نقوم بالضغط عليه وفي بعض الحالات بطلب اسم 
مستخدم وكلمة مرور كما في الصورة التالية : 


قر امام 
أهلا بك في :1171م /[ا/اام دام 


١! 9‏ - لغه 


6361م - العربية 





اسح المستخدح: 
1001 


كمه المرور: 


في حالة تم ظهور الصورة اعلاه نختار اللغة العربية ونضع اسم مستخدم (2001) ثم نترك كلمة المرور فارغة ونضغط على زر (انطلق) وستظهر 
الصورة التالية للوحة التحكم الخاصة جر نم2 تسامطام) علما أن كلمة المرور واسم المستخدم الذي وضعناها هي افتراضية تأتي في أي برنامج 
سرفر محلي مالم نتدخل ونقوم بتغييرها. 





١/08 ||: 00967 0 0‏ 
الاكدا أع0.0أم حاعع0©1م1 :اأجممع ‏ 772755202 2:00967 |8 ١/60‏ 








550 







































0 لل الاامام 
1 9 قاعدة بيانات |9( 5001 الحائة 334 0565لا ل ه] تصدير 269 استيراد ‏ #"طق الإعدادات | 58 ترامن | (53] سيل تتاني ١‏ !إ إستتساخ ٠‏ (<4 متغيرات <١‏ ك مجموعات المحارقف ٠|‏ ,12 محركات 
6 ها © |[ © 1 2 1ع 4 5 5 7 
0 1 ااعرتاوتة) وتاوتت تداع عاعزه 
| (الجداول الأخيرة) 5 04 
: 00 المع لملأععمممء يعبمع5 © : | 5 أع_لوعمعو_ةاأن | ٠‏ خام: 1)2/1]7 13 )دو «الدع0ا) دو الدء0) 
لا ٠‏ اوذرزانا :ع وطامة 
1 ك3 ٠‏ ا0ت)) املاع 5 /[أأتانالكته) _الاكرلزاا - وه١-55.24‏ :رمأواع عنقننتاام5) 
9 9 ه نسخة البروتوكول: 10 
5 5+ ع1306د2عممم ه المستخنم: 8054|ق001©/0] 
٠ 0 08‏ (8أن) علمعامنا 8-عآنا تأعدروطء ععرمعة 
4الالا لد و (©) ©3/7910239]- ذغلد ْ 5 31م - العريية 
غم 98 
1 49 مظهر: ْ * 0130م | 
1١‏ 5 00 
٠. 3‏ الخط- 0 
ود 98 -- سعدا ٠‏ 5.3.13/طنام (1032للا) 2.2.22/وطعهمم 
٠ 1 9 3‏ - 20102224 - 5-0-8-0 ل راو كلام - أوكلااصطً! لمأقمعنا أررعااء 0330356 
: 1 "4 وودتلاوة وعوالا 0 55 
3ع_0 13 لك : ره 
0 « الوكلاتم تممأاعمعغرة مرام ري 
3 
لا7134 6 
و 1 
3 لكك 
طعا3 1 
02 3 : 
اإوة ص ٠‏ الصفحة الرئيسية الرسمية ل 015 ليث/[أ/اام ام 
. مشاركه 
0 ه احلب دهم 
م3 ه قائمة التعدياةتت 
3 6 








كما تشاهد الصورة اعلاه وحسب تم الترقيم باللون البنفسجي للصورة لشرح وظيفة الأزرار الموجودة والاكثر استخداما فكما تشاهد الصورة وحسب كل 
رقم : 


(قاعدة بيانات) : من خلال هذا الزر والضغط عليه يتم ظهور الصفحة الخاصة بعرض قواعد البيانات الموجودة ضمن السرفر لديك في جهازك وايضا في 
السرفر الذي سيتقوم برفع موقعك عليه في الانترنت وتظهر الصفحة كما في الصورة التالية: 


ْ 2 غدمطادعها 


(01) قاعدة يياتات زه 501 ١)‏ وو الحائة ‏ 22 ورعولا ه] تصدير ١|‏ +ج] استيراد طق الإحدادات 8 سن امن | (92] سيل ثتتاتي || إستتساخ [<4 متقيرات مجموعحات المحارف 575 محركات 
قاعدة بيانات 


ذا عموطونول عأمع 0 © 
||" «نط_قان | (كوين) 


9 


خاعدة اليياتات ى 109[)وءأامع؟ معغودال! 


كما تلاحظ الصورة اعلاه من خلال المربع او الحقل الموجود تحت (02622256 ©07©24©) نضع اسم قاعدة البيانات التي نريدها بداخله ونختار من 
الخيارات المنسدلة بجانبه في حالة بناء قاعدة بيانات باللغة العربية على خيار أو الترميز (زط_1118). 


(501) من خلال هذا الزر او الرابط تتيح لنا الصفحة عمل ادارة لقواعد البيانات بكاملها محتواها ولكن عن طريق استعلامات ,5001 وهذه 
الاستعلامات تكتب يديويا فمثلا لو أردنا عمل عمل قاعدة بيانات اسمها 0120011 نقوم بكتابة استعلام ,5001 كالتالي: 


5010011 لاكخذخظذ4 1 24اآ 11[ ذكل 1 


ونكتبه في المربع الظاهر في الصورة ثم نضغط زر تنفيذ الموجود تحت المربع الخاص بالاستعلام على اليسار: 


١/08 ||: 00967 0 11111 
١/0 8|115 2:00967 772755202  عصموهتا: لكا أع0.0أمحداعع60©1]م1‎ 



































١7 


[3] كاحدة يياتات زه 501 طلا الحائه >5 ورعولا كو تصدير ها استيراد “إي الاحدادات م ترامن (8] سحل شاتي / مساج <؛ متقيرات مجموحات المحارف 1) محركات 


أ05أاهعن1!" أعتمع5 مه 5ع أرعنانالقعنان 501 دمن8": © 


:  هطدمقألات‎ 22125255 1 





| 31غان) | 


[ عع ةاناعم | : ] |#] عرض هذا الاستعلام هنا مرة أخرى [] 8016 /[]علا0 21310 


(الحالة) : وتعرض عليك العمليات التي تمت واحصائيات بذلك اضافة لحالة السرفر من تناقل للبيانات وغيرها .علما اننا لا نستخدمها في عملنا عند 
انشاء المواقع الالكترونية. 


(75619]): عرض المستخدمين للسرفر والمتاح لهم الوصول لقواعد البيانات » في اجهزتنا الخاصة لا نقوم بعمل مستخدمين ونتركها كما هي الغالب 
حيث ان المستخدم الافتراضي هو (20014) وكلمة السر لا توجد. ونستخدم الصلاحيات من اسماء وكلمات مرور في السرفرات عند أطلاق المواقع 
الالكترونية وربطها بقواعد البيانات وسنتعلمها عن رفع المواقع في الفصول القادمة ان شاء الله. 


(تصدير): من هنا نقوم بعمل إخراج قاعدة بيانات كاملة بجداولها ولا نستخدمها الا بعد نهاية عملنا للموقع نقوم بتصدير او اخذ ملف كامل في قاعدة 
البيانات لنقوم بنقله لسرفر على الانترنت أو حتى الى جهاز آخر. 


(استيراد): الاستيراد عكس التصدير وهو لعمل استيراد وجلب لقاعدة بيانات موجودة كملف وهو مانقوم به في السرفر على الانترنت من جلب الملف 
الخاص بقاعدة البيانات عند أخذها من جهاز آخر. 


(الاعدادات): وهنا يمكن عمل تعديلات معينة على :71711152011:2112 وتصديرها واستيرادها والمزيد من الاعدادات ولا نستخدمها بكثرة في أعمالنا. 





0 0 00967 :ع |08 
لعلله . اة وكت زو “اإطفوة ا 0 00 1000 


00 
عملياث 117:201011م01 
إنشاء قاعدة بيانات 


نقوم بإنشاء قاعدة البيانات من خلال نمطم بالضغط على ) قاعدة بيانات ( ونقوم بعمل أسم لقاعدة البيانات واختيار الترميز المناسب 
للمحتوى والذي سيكون بالغة العربية كما في الصورة : 





ها قاعدة بيانات | ([ظلم 5001 | وي] الحالة | 55 5رع5لا | #] تصدير | 2 اسصراد | كلضي الإعدادات | 2 درامن | 220 سيل تتانى || إستساح <4 متقيرات 
قاعدة بيانات 
ها عسعقطفتهل عاهع) يق 
1 اومراء: | ؟, 8/1_لاأنا : تكوين َ( 
شاعدة اليياتات إلى (إاملأوع[امرعء ععذأكوان! 
بعد وضع الاسم لقاعدة البيانات واختيار الترميز (ؤط_0118) نضغط على زر (تكوين) وستظهر لنا رسالة خضراء بنجاح عملية إنشاء قاعدة البيانات 
(5©520011) كما في الصورة: 
قاعدة بيانات 


ذا عكموطوأول عأهع) © 


1 ع5 7 


غاحدة اليياتات ى (4[100وعأامع؟ عع غودالا 





ته 15 تحد -. 1 واه 
الا م3 عي مسنسخة تحقق عن الصامحيات 


الان لدينا قاعدة بيانات اسمها (5©10011) يمكن مشاهدتها ايضا من خلال زر قاعدة البيانات وستظهر اسفل حقل انشاء قاعدة البيانات وعلى الجانب 
الايمن لد ندج تنام طام و الاستعلام 5)01 الخاص بانشاء قاعدة بيانات كالتالي: 


: 210011 لاكذظذخ [! 4 را 11 ذال 01 





081١|: 00967 0 1111‏ اا 
الا كسا أ0.وأمحاءعع]0]0©1ص1 :اتأهمع ‏ 772755202 2:00967 8|115 0/ا 
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إنشاء جدول في قاعدة البيانات 


بعد أن أنشأنا قاعدة بيانات ستحوي قاعد البيانات على جداول حسب احتياج الموقع فمثلا سنقوم بعمل جدول ونسميه (5003067245) 


لو افترضنا أن لدينا هذا الجدول : 





وطريقة إنشاء الجدول من خلال :11ن1د37532)01:ام كالتالي: 


من خلال زر (قاعدة بيانات) ستظهر لنا قواعد البيانات تحت حقل انشاء قاعدة بيانات وستظهر لنا قاعدة البيانات (5©0011) نضغط عليها وستظهر 
الصفحة التالية كما في الصورة: 





م[ صم 0 48 0 7// م 8 م ل 5 


: تملايناء | (ط 501 | 1 أ[ ]| +ع استيراد ١‏ ق عمليات | 22 الإمتيازات | تبي 80041065 ٠١‏ © أحدات | 26 5رعون1,1 
2 ها © 6 
لا توجد جداول فى قاعدة الييانات هذد!. 
الجداول الأخيرة) 7 1 
(الجداول الأخيرة) ... 8 أنشيئ الجدول 
١‏ 501 


لا توجد جداول في قاعدة البيانات هذه!. الاسم 5 الم أه ععطدونالا: ها 


© 13018 عاأدعي 


من خلال الصورة أعلاه وتحت عنوان (انشئ جدول) في الحقل (الاسم) نكتب اسم الجدول (50106126) ثم المربع بعد النص المكتوب 01 61 11221ال1 
5 وتعني عدد الأعمدة. لوعدنا للجدول أعلاه وأحصينا عدد الاعمدة سنلاحظ أنها ه اعمدة وهي (الرقم - الاسم - الجوال - العنوان - 
ملاحظات ) نكتب 5 في الحقل وكما في الصورة: 


3 أتشئ الحجدول 


الاسم: | ]5100281 5نامع أه ععطرونل!: 5١‏ 


من خلال الصورة أعلاه كتبنا اسم الجدول وعدد الاعمدة نقوم بعد ذلك بالتنفيذ وذلك من خلال زر (تنفيذ) وستظهر رسالة باللون البرتقال بنجاح العملية 
وستفتح لنا صفحة أخرى لإضافة أسماء الأعمدة و خصائص كل عمود ايضا كما في الصورة. 


١/08 ||: 00967 0 0‏ 
لالتحا أع0.0أم حاعع0©1م1 :اأجمع ‏ 772755202 2:00967 || ١/608‏ 





2.610 ا 65 اسم الجدول: 15 0نامع 600 
0 ساد 5 أقاع0ناأ5 ا( 1 ١‏ اللي 
2 9 
ىو 9 © جاء إنئي 
الجداول الأخيرة' 3 لسع توع له انطول / القيمة إوي إغتراضي إو» ممتغهاامه الخواص خاني فهرست 2_1 تعليقات 
(الجداول الآخيرة) ... 
ا ١‏ طيلبت : حَ ك- . - . 
,5 001 5 
لا توجد جداول في قاعدة البيانات هذه!. 11 ؟ عجرهلم ؟ ؟ ؟ يت 3 
© 13016 قأدعي) 101 5 00ل 5 3 ,5 - ؟ 
1لاا1 , 0ل ,. ١0‏ 4 _-_-_- ؟ 
101 , 1 .. .. ؟ ١‏ 
تعنيقات الجدول: عرأومع عومعه]5: إن ممأاغواامع: 
11108 7 0ط قاط_قنأنا 


لزع 111101 همم: إن 


كما نلاحظ الصورة تم طلب اسماء الأعمدة مع مواصفاتها ونسرد الان مواصفات كل عمود كتابيا ثم ننقلها للجدول (للتوضيح): 


العمود الأول ( الرقم ) وهو أهم عمود في كل الجداول ونسميه (المفتاح الرئيسي 129 51:1111837) وعن طريق المفاتيح الرئيسية ترتبط جداول قواعد 
البيانات مع بعضها بالإضافة إلى أن قواعد البيانات لا يمكن أن تتخلى عن المفتاح الرئيسي للجداول وهو مهم جدا يفيد في عمليات قواعد البيانات كما 
سنتعلمها لاحقا. 


العمو الثاني(الطالب) وهو عبارة عن نص عادي وسنحدد حجمه (عدد الحروف) في الجدول. 
العمود الثالث (الجوال) وهو عبارة عن رقم وسنحدد خصائصه ايضا في الجدول. 

العمود الرابع (العنوان) وهو عبارة عن نص وارقام وسنحدد خصائصه في الجدول ايضا. 
العمود الخامس(ملاحظات) وهو عبارة عن نص طويل لأني ملاحظات وسنحدد حجم النص. 


كما في الصورة أدنا عملنا خصائص الأعمدة : 


610 ا 65 اسم الجدول: 5نامع 600 
ل م داع 0 نأو 1 ١‏ حنيد 
2 9 
رت للد © بناء إن 
_- الاسم توع إن الطول / القيمة © إغتراضي إو» مملغواامه الخواص خائي فهرست 1_لر ميقت 
(الجدا او ل الاخير 5 17 
تومت 107 ؟ 4 عمرولم ؟ ؟ ؟ لمهم ؟ 7 
04 01 5 
لا توجد جداول في قاعدة البيانات هذما. 00 امن املا ؟ 56 ع 0ل ؟ 7 7 5 3 
13016 عأهع1) 11 11 ؟ 14 101" 5 5 ,5 _-_-_- 5 
200015 امن املا 5 66 1 5 7 14 -_-_- 7 
0 مت املا 5 100 1ن 0 0 5 -_-_- 5 
تعنيقات الجدول: عأووع عومه0غ]5: إن ره ةلاه : 
11118 3 _. صاط_قتانا 


0ع 1111010همم: إن 


في الصورة أعلاه العمود الأول على اليمين تحت (الاسم) مطلوب أسماء الأعمدة قمنا بكتابة اسم العمود الأول (:11311217©1) ويعني الرقم ثم اخترنا انوع 
(17771) وتعني عدد صحيح. ثم الطول وكتبنا (4) بافتراض ان يصل الرقم الى اربعه ارقام ثم تركنا الخواص التي تليها كما هي وهي (افتراضي ‏ 


0 0 00967 :ع |8 ١/0‏ 
لعلله . اه تلو «اإطيوة ا 0 00 1000 





كيدا 


- 2011310 - الخواص - خالي) وصلنا لخاصية فهرست حددنا (21+1371841257) وتعني مفتاح رئيسي وان يكون لكل طالب رقم خاص به لايتكرر 
أبدا. ثم اشرنا بعلامة صح تحت (4_1) وتعني زيادة الرقم اتوماتيكي بمعني اذا اضفن اسم جديد يضاف رقمه بالترتيب من دون تدخل مناء وتركنا 
الخاصية (تعليقات). 


العمود (:221) ويعني الاسم حددنا نوعه (+141*001141) وتعني نص .ثم الطول وحددنا (55) اي عدد الأحرف والارقام تركنا بقية الخواص. 
العمود (»220111) ويعني الجوال ثم حددنا النوع (1771) ويعني رقم وحددنا الطول ؛ ١‏ رقم وتركنا بقية الخواص. 
العمود (ووع*2001) ويعني العنوان حددنا النوع (؟1741)11415) وتعني النص وحددنا الطول 5" حرف وتركنا بقية الخواص. 


العمود (2016) ويعني ملاحظة حددنا النوع (1481*0011412) وتعني انص وحددنا طول الحروف ٠٠١‏ وتركنا بقية الخواص. علما ان الطول للقيم 
حسب تقييم الشخص تقيم مثلا الاسم كما يحتاج لحروف ورقم الجوال كم يحتاج لعدد ارقام وهكذا. نصل اخر ثلاثة حقول لا نضيف الا الحقل الاخير على 
اليسار 0011361011) ونختار «رزط_1148 . بعد الانتهاء نقوم بالضغط على زر (حفظ) وسيظهر الجدول كما في الصورة: 


كس امام 


عر بتاع | ([ | 501 ١‏ 1 بحث استعلام يواسطة مثال | ل] تصدير | [ استيراد | #إى عمليات | 1ه الإمتيازات | تي 8010110165 ١‏ ©) أحدات 5اع1100 
2 هنا © [© © ِ 
جدول ه العملية صقوف إن تيع 60غأهاامع حجم الحمل الزاند 
فزق تانايك استعراض مم بناء 8 بحت 6 إدخال © إفراخ © حذف 8 08همما وأط_قثآان 16 كيلويايت - 
(الجداول الأخيرة) ... - 3 
1 جدول (جداول) المجموع © 12008 (أط_1]18ن0 26 كيلويايت 0 يديت 
؟" 501 
١‏ تحديد الكل / إلغاء تحديد الكل مع المحدد: 7 


كالتالي:.5)01تعليمة اضافة جدول بواسطة 


41 .11خ ا 11 خذنكل 01 

( 

1114111861“ 1111)4( 

و(55) خته "721 11011116 

11105116 11:1) 14( 

(1701:)100ع101 ©1201 ,(1701"[701")661 001017655 


١ 


11111 0 00967 :|08 ا/ا 
الا كسا أ0.و1مداءعع0]0©1مأ :اأهمع 2 772755202 2:00967 8|128 ١/0‏ 





ا 


إضافة ببانات (صفوف) إلى الجداول 


يتم إضافة بيانات إلى الجداول عن طريق 127:20212[طم ثم اختيار قاعدة البيانات التي نريد الضافة لها مثلا (5©1:001) ستظهر كما بالصورة التالية: 


مامقو امهم 


1 عرز بناء 0 ( 501 ١1 ١‏ بحث استعلام يواسطة مثال | تج تصدير 1 [2] استيراد | #ّى عتمنيات | 1ه الإمتيازنات | تي 801041065 | ©©) أحداث | 32 11100615 
2 ها © [9 © ِ 
جدول ه العملية صقوف (9» تزع 01134108 حجم الحمل الرزاند 
ْ لك ااه [5] استعراض عمل بناء ا بحت 6 إدخال © إفراخ © حدذف 5 8008| لأط_قثآن 16 كيلويايت 2 
(الجداول الأخيرة) ... 5 
ا 1 جدول (جداول) المجموع © 10008 (أط_8]ن 16 كيلويايت | 0 يديت 
3 501 


كما في الصورة أعلاه ستلاحظ اسم الجدول ()طع5)010) ولإدخال البيانات نقوم بالضغط على إدخال وستظهر نافذة ادخال البيانات كما في الصورة: 


( أوملالدءوا » © 1امملة 





عمل يقاء | إلا 501 ٠‏ ا بيحث استعلام يواسطة مثال | لِم] تصدير | [م] استيراد | #إى عمليات | 1ه الإمتيازات | ف 085لؤنا80 ١‏ ©) أحداث | 32 10190605 
جدول ك1 3 إدخال الجدول 
ليحانالنك استعراض | الة _خانى القيمة 
حتمود نوع نلك يادي 2 
1 جدول (جداول) , 1 
لاطا 04 35 
١‏ تحديد الكل / إلغاء تحديد الكل 
عتققصض 3)55لاعنرتر) 3 ا 
ا 0 اعم حلى, 
وه عرض تسخة للطباعة قاموس البيا 
عازطاملم 0214 ص - 
3 أنشئ الو 11689 
5 3)66لاعات/) 5 . : ا 
اليمن - صننعاع - آاماتة العاصمة 
عغمصض 3)100طاعرتن) - 
م تيت 
تتقية | 
#] تجاغل 
حمود توع دائة _خاني لشدء ١‏ 
ع 1اناط 04 -- - 
عتقضقصض 3)55لاعت/) 5 
عاأطملم 000014 3 
5 3)66داع]ت0) 35 
كنغاء 
يج 


لاحظ كما في الصورة بعد الضغط على ادخال تظهر النافذة السابقة الصف الأول يطلب 211171٠‏ وهو الرقم وتركناه فارغ لأننا قمنا اعدادات بإضافته 
اتوماتيكا. الصف الثاني طلب الاسم 22116 وكتبنا (يوسف صالح علي). في الصف الثالث من الفورم طلب رقم الجوال »2201116 وحددنا الرقم» في 
الصف الرابع طلب العنوان 200755 وحددنا العنوان» في الصف الخامس طلب ملاحظات واضفنا ملاحظة. 


بعد الانتهاء نضغط على زر تنفيذ. يمكننا هنا ان نظيف اكثر من صف لاحظ المربعات او الحقول في الاسفل . او الاكتفاء بإضافة صف واحد ونضغط 
على زر تنفيد. 
تعليمة اضافة البيانات السابقة للجدول بواسطة 5001 كالتالي: 


(1101, 01017655 46, ©106121)7120112©,1110211 110/100 1 11كا] 
: (ملاحظات,اليمن - امانة العاصمة ,517/5 ه 4 ١ ١‏ ,يوسف صالح علي ) ١74111115‏ 


تم عمل كود 5)1 أعلاه وتعمل على ادخال القيم الى الجدول .قمنا بعمل استعلام ((13160 '1321519141) ومعناه ادخال إلى الجدول (5030621) ثم ذكرنا 
الأعمدة التي نريد الادخال لها بالترتيب» بعد ذكر الأعمدة نذكر البيانات الاسم والجوال والعنوان والملاحظات حسب الترتيب للأعمدة. 


١/081١: 00967 0 171110‏ 
كسد أ0.و1محاعع]0]0©1م1 :اتأهمع ‏ 772755202 2:00967 ||08/ا 





١ 


تعدبل وتحديث فى قاعدة البيانات 


للتعديل البيانات عن طريق نس امام بواسطة الخطوات السابقة فتح قاعدة بيانات 9110011 ثم الضغط على الجدول 54106114 وستظهر كما 
بالصورة: 
ب ]| ه وعتالنام 1ل عاأطامصدم كعع علج 11500 
اه “تي تعديل عله انست كم احذفا لم يوسف صائح على | 123456789 اليمن - صتعاء - امانة العاصمة ادورة المواقع الالكترونية 


عرض : 5زلامم |10" بقاع وعلوعملا إلاذ 1015 أه أعطحلمرسلةا إن -101010 513116 


كما تلاحظ أعلاه تظهر صورة لجدول 60064و والبيانات التي بداخلة ويمكننا التعديل بالضغط على ايقونة او رابط تعديل امام اي بيانات المراد التعديل 
عليها وبعد الضغط على التعديل ستظهر النافذة التالية : 





مجم م6 0 7 مام كك 2 ل ا اله 


5 استعراض | آلا يتاء | (لل 501 ٠|‏ طا يحث | 6 إدخال ١‏ 84 تصدير | (كا استيراد ١‏ طق عمليات | 26 5 ©1109 


2 9 © © 6 0 
حمود توع للق حادم كك 
سس : 10 00104 34 2 
9 سات عمقص 3])55لاعخج/) 35 ا 
 [‏ 06116ناأ5 عانطمم 2 14)غمة) 3 120019 
© ذامها ماهم 15 3)66 عق 35 


اليمن - صتعاء - اماتة العاصمة 


كه 


ع 3])100اعق/ة ع 
دورة المواقع الالكتروتية 


كما تلاحظ ظهرت البيانات ويبقى علينا تعديل ما نريد وبعد الانتهاء الضغط على زر (تنفيذ). 
تعليمة ,5001 لتعديل وتحديث بيانات في جدول: 
1 121411 


'1'-11107116, يوسف '-7701116 5111 
؛' 17111118611 1711111 


كما تلاحظ تعليمة او استعلام 5001 بواسطة 118821(41317 يمكنك تعديل أي بيانات في الجدول وبالطريقة السابقة في السطر الأول كتبنا استعلام 
التعديل ثم اسم الجدولء في السطر الثاني كتبنا العمود الذي نريد التعديل فيه وهو الاسم عدج ثم علامة يساوي ثم الاسم الذي نريد وضعه بدل السابق 
وكما تلاحظ فلابد من وجود الفواصل (,) وايضا علامة التنصيص كما في الاستعلام. ثم العمود الخاص بالجوال وذكرنا اسم العمود ثم علامة يساوي ثم 
بين علامتي تنصيص الجوال الجديدء وهكذا مع اي عمود نريد تعديله. في السطر الاخير وهو مهم جدا الاشارة الى رقم الصف المراد تعديله بحيث طلبنا 
شرط 7771111115 ومعناه بحيث أو بشرط ثم نكتب الشرط وهو '1'-:121111:761 وهو أن الرقم للصف هو رقم واحد. هنا سيتم التعرف على الصف 
وتعديله كما نريد. 





1111 0 00967 :|08 ا/ا 
الا كسا أ0.و1مداءعع0]0©1مأ :اأهمع 2 772755202 2:00967 8|128 ١/0‏ 
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حذف صف أو بيانات من الجدول 


لحذف بيانات او صف من قاعدة بيانات ومن جدول بالتحديد فعن طريق 2112آ)92تامطام نفتح 10202110516 ثم ندمل 2 5ددمطام ثم قاعدة بيانات 
فنختار قاعدة البيانات ولتكن 5110011 ثم نحتار الجدول )511101611 ستظهر لنا كما في الصورة: 


- خبار انه 
4 ع ]| ه بعالونام علمقه عاأطمم 2001855 101 


لا ”ني تحديل عبن تسح © حتقة ل يوسقف صائح علي 1234567891 اليمن - صتعاء - اماتة العاصمة ادورة المواقع الالكترونية 





من خلال الصورة تظهر ايقونة الحذف الحمراء امام كل صف فمن خلالها يمكن حذف اي صف. كما يمكن التأشير على الصفوف بعلمة صح في الطرف 
الأيمن والحذف من اسفل الفورم. 
تعليمة الحذف في ,5001 


7101111 1011111 
: 'يوسف صالح ' -1:011:6 411712 ' 1'- :121111181 1717111111 


كما تلاحظ أعلاه تم عمل استعلام لحذف سجل او صف في جدول معين بواسطة تعليمة (1'1017/1 171711:115) ثم نكتب اسم الجدول وهو 5)1)1©21 ثم 
ننتقل للشرط وهو (7171117119) ثم عنصر الشرط نفسة وكتبنا الرقم :©6 23125 بأن يساوي '1' وسيقوم بحذف السجل كامل للرقم واحد. ثم أضفنا 
شرط آخر ويمكننا الاستغناء عنه بعد تعليمة ((41771) وهو الاسم ©1213 يساوي "يوسف صالح" ثم الاغلاق بفاصلة منقوطة. 


١/08 ||: 00967 0 0‏ 
الاكدا أ0.0أم داعع0©1م1 :اأهمع ‏ 772755202 2:00967 || ١/08‏ 





ربط 2115 هع .1/7501 


نصل هنا إلى أهم الخطوات في انشاء المواقع الالكترونية وهو كيفية إدخال البيانات من الفورم الذي تعلمنا إنشاءه بال721173411 مع البي اتش بي 
والخزن البيانات في قاعدة البيانات الذي تعلمنا انشائها ايضا. تعتمد عملية ربط قاعدة البيانات مع صفحة البي اتش بي على عدة ادوات تعلمنا الجزء 
الأكبر منها والأهم وهي (الفورم - وجود قاعدة بيانات - دوال نقل البيانات - عمليات الاستعلام ,9001 - التنسيق بشكل عام ). سنأخذ هنا كيفية إدخال 
البيانات إلى قاعدة البيانات. 


إدخال البيانات بواسطة :172151 
0 »6©4» >« 


لتعلم كيفية إدخال البيانات سنقوم بعمل فورم فيه طلب لبيانات جدول الطالب الذي أنشأناه مسبقا في ال:1232)::1م1م الموجود في قاعدة بيانات 
1ه والخطوات العامة هي (أولا :عمل مجلد جديد وليكم اسمه 87_115501م أو اي اسم ثم عمل فورم الإدخال في صفحة لام ولتكن 
مطام.)اء5ز ثانيا :عمل صفحة أخرى سنسميها مثلا م1[م.وو»1:02م_1125612 تستقبل عبر الدوال البيانات وتقوم بعملية الاستعلام ,5001 لإدخال 
البيانات إلى قاعدة البيانات ) 


الخطوات بالتفصيل: 
الخطوة الأولى: نقوم بعمل الفورم اللازم لإدخال البيانات من خلال الصفحة التي سننشئها وهي 112561_71:0©55.7117 وسيكون الكود كما في الشكل: 


حت مط > 
لدع طعت / > أدغل بياتات الطائلبةطعدعع ج روع» 
< "110123327 5-75 835 1ت 20115 
جر عطة» 
د" با قنع" 212111503 "وطام . وقع003طم_ماعع 125 " - 235110511 2101211 
إضع اللطالت 
جد “را عتطع-ه "عورد و" ع ع رمم "عيرم ع "7 حدمو 11115 > 


الجوال 
د/ر عط>< ”127 طمن" -7712د م "عع طلاسلتد” م جتن اتات 1 > 
العتوان 
دمر طعت" م ممع نع "عدم رمم "اعأيرم ع مور نان 1 > 


بالاحظات 

ج/ر عطهتة" بللاحطلات 721112-77 "ممق" ع عنتمم "عمج "عدم ورت انارت 1 > 
ع" ا نات "" حدم ورين عاناع21 1 > 

211 20 “رج 

01 ثر جه 

مط ره 





كما تلاحظ الفورم داخل منطقة ال(20039) ومحتواه الحقول (الاسم - الجوال - العنوان - ملاحظات ) تعلمنا سابقا كيفية عملة وشرحنا اساسياته . 
نلاحظ في سطر 702 حددنا الاكشن واتجاه انتقال البيانات وهي للصفحة المحددة بعد الضغط مباشرة على زر 116:ط؟ »كما نلاحظ في سطر ه؟ 
استدعينا كلاس تم انشاءه مسبقا لعمل تنسيق للديف الذي يحتوي الفورم لتنسيق الفورم ويكون اكثر وضوحا والكلاس محلي وضعناه في منطقة 
(12620) وهنا ليس معناه اننا نقوم في لغة بي اتش بي بوضع الكلاس ضمن راس الصفحة ولكن فقط هنا للمثال ويجب ان تعتمد على ملف ال055) 
دائما في الأعمال وسيكون الكلاس كالتالي : 


0 0 00967 :ع |08 
لعلله . اة وكت زو “اإطفوة ا 0 00 1000 





<<" دوج ار رمج "حم ورا 51> 
22 اعت . 
عاقتت 17 : 12133 قن 
نا ناك : 7131 
21 : 13 1ع ات 125 011 
21 4 : عم1امع 
55211 ,1170125 ,ص "لتققام 1 بات11 1170235" : 1 للقت 2 11ت 12 
513 : 1ق 523-:10111 
5222 1 : 55 101112-51 
29913 55113 :عع عمط 
نم3 درت م3 : 115 1 مقع -عع عوط 
+ 2م جرورة درك هيمك : 1د هتمهم 
51112 ره 


:5 الل 


فم فم ذ 


0 
1 
12 
3 
34 
- 


قم قم قم قم قم قم قح[ قي 
لزع ل 5 15 2 





وسيكون شكل الموقع او الفورم داخل الديف كما في الصورة : 


أدخل بيانات الطالب 





كما تلاحظ الفورم أعلاه بشكل منسق بنسبة 90٠‏ وسيأتي فيما بعد في التطبيق النهائي لكيفية التنسيق الدقيق للفورم بشكل عام وننتقل للخطوة الثانية. 


الخطوة الثانية : نقوم بعمل صفحة 112561_71:00655.717 والتي ستحوي دالة استقبال البيانات من الفورم وعملية الاتصال بقاعدة البيانات وعملية 
الاستعلام الخاصة بإدخال البيانات للجدول والكود كالتالي: 


لعرااء سداق 

ترتادر > 

("11صصطعة"” ,"” , "ممع" , "1ق م1531" ) اع ددمت 2115411 تومت 5 

لماوع ممع عتعقطت “رم 

( (1211921طع_ناعع طم _ 5175511 11 
1 
(]212101_ناعع ططدت _9411 15د . " :طلليؤد112 مهنا تاععصدمت م6 151120" مطمعع 
/ 


[ " عسهد ' ] 2053 _5 ععررم رج 
['312طمه' ] 4_20537عع1 1طممة 

[ "35غ2ع2 هه ١‏ ] 205313_وحدوع2 3003 5 
[ "عغاهمد ' ] 2053 _وحع مرجع 


( 2مس ,302233 ,12 1طمد , عتتقص) عصع نات 11110 11158:81 "1ن م 5 
"( "تخ صصة ' , "' 55002233 " , "12 1طصورة ' , ' علتقمة ' ) 5 «الاملقما 


(2591 ردطدت 8 ) باعداكت_11ه؟ كته 
"تهت الاضاقة يتجاح" قطمع 


(صطمع5) 1552 _11هن دتتهس 





قبل الدخول في شرح الكود نلاحظ في تقدمنا في تعلم لغة البي اتش بي كبر حجم الكود لكني أنبه هنا إلى أن الكود مهما كبر فهي عمليات بسيطة تعلمناها 
مسبقا نقوم بدمجها وربطها للتكامل مع بعضها ونحتاج هنا الى تركيز وترتيب هذه الاكواد فقط. 


في سطر ‏ ثمنا بعملية الاتصال بقاعدة البيانات اولا قبل اي ادخال او اخراج منها. قمنا بعمل متغير وسميناه «رم50 ثم ادرجنا بداخله دالة الاتصال 
وصورتها العامة (''ع5©1"'',''025995010'',''12)2125لا'',''11051 12159:501)9619©1 حيث 12056 9613761 هو السرفر المستضيف لملفات موقعك 


: 0 00967 :ع |08 
1ع .0 أم طاععغ]. ننانانا نالا 


تلركااة روعت كايا للعيية 2 /00967 :2 اا ١/08‏ 



























































لا 


وقاعدة بياناتك والسرفر الذي يحوي قاعدة البيانات الخاص بنا هو 1022112056 كما تلاحظ في الكود ثم ع5 وتعني اسم المستخدم الخاص بالسرفر 
لكي نستطيع الوصول لقاعدة البيانات فوضعنا اسم المستخدم 20014 لأنه موجود فيه مسبقا وهي افتراضي في أي برنامج سرفر ثم 7255157010 وجعلناه 
في الكود فارغ لأنه لم نعين في السرفر الذي نعمل عليه اي كلمة مرور للمستخدم فتركناها فارغة. ثم 09485256 وهنا نضع اسم قاعدة البيانات 
فوضعنا اسم القاعدة التي نعمل عليها وهي 5010011 . 


في السطر١ ١‏ استخدمنا دالة الفحص او الخطأ ()1235011_011116©14_©17120 وهذه الدالة موجودة ضمن برمجيات السرفر تقوم بعملية فحص ما اذا 
كان هناك اي خطأ في عملية الاتصال ورقم الخطأ وضعنا هذه الدالة في تعليمة شرط. والغرض من ذلك تنبيهنا الى وجود الخطأ واعلامنا بمكانه إن وجد. 
ومعنى الدالة في داخل الشرط هو (في حالة كان هناك خطأ تم ايجاده بالدال يتم اتخاذ الاجراء ما بين القوسين ) 


في سطر ١١‏ وما بين القوسين هي عمليه إخراج بواسطة «وراعه ثم نص عادي كتبناه وهو ر151595001 10 2021:6214 10 1”911601: ومعناه فشل في 

الاتصال ثم نقطة ومعنى النقطة هنا (ايضا يتم اخراج ما بعد النقطة وهي اختصار لعدم تكرار 0120©» ) ما بعد النقطة طلبنا اخراج الخطأ بواسطة الدالة 
()"1_©11:01 1155011011116 . 

[ " عستهم ' ] 2051 _5 ععررم م 

[' 112طمه" ] 20537 _312-5طمررة 


: [ ' 3002255 ' ] 2051 _وحووع 012ل 5 
[ 'ع72صقط ]2051 _وحعم ونه 





كما تلاحظ من سطر ١١‏ الى سطر ١5‏ عملية استقبال للبيانات الى متغيرات عن طريقة دالة 200571 © .كما في السطر ١١‏ أنشأنا متغير وأسميناه 
عدروررة ثم عملية استيراد الحفل عدرروم إلى داخله بواسطة 00 .وهكذا مع بقية المتغيرات. 






( 252522 ,5 ععققةت ,12 1طصمد , عنتقم صن نات 11110 1115:1581 "1-7هه 5 21 
ع" ( "مع مم8 ' , ' 3دعع5002ش5 " , "12 1طصممرة " , " للتقدي ' | دنالاملتك2ا ‏ بسرت 


في سطر "١‏ الى "١‏ عملية وضع الاستعلام داخل متغير وهو 9501 ويمكن تسميته باي اسم. قمنا بعمل متغير واسميناه 4501 ثم ادرجنا بداخلة عملية 
استعلام وتعلمنا مسبقا طريقة الاستعلام والادخال بواسطة ,5001 في السطر ١١‏ كتبنا تعليمة الادخال 17710 13271515121 الى )50030612 وهو الجدول 
وحددنا الاعمدة التي سنضيف اليها وهي (©1206 ,2001:©55, 1201116 ,22126) ثم في سطر ” " حددنا القيم 574117155 وهي المتغيرات التي أدخلنا 
فيها البيانات الاسطر من ١5‏ الى ١9‏ وحددنا المتغيرات ('5201011:©55','512066' ,'512201116','عتتقدرة؟'). 


(5591 نادت 5) 217 1ك 7511ل 
"تهت الاضاقة يتجاح" صطعع 





في سطر 754 كما في الصورة أعلاه أضفنا دالة جديدة وهي دالة الاتصال وتنفيذ الاستعلام عن طريق المتغيرات والصورة العامة هي : 
(950 ,2275011_01117099 حيث تكتب الدالة كما هي ويضاف بدلا من 99 متغير الاتصال وقمنا بتغييره ب9002 والمتغير 4 هو متغير الاستعلام وقد 
وضعنا المتغير الذي يحوي الاستعلام وهو 9501 . في سطر 5" بعد الانتهاء والمرور من سطر 4" وتنفيذ الاتصال والاستعلام الخاص بالبيانات 
وادخالها يتم كتابة (تمت الاضافة بنجاح). 


ملاحظة: في تنفيذ الاتصال مع قاعدة البيانات في لغة البي اتش بي يفضل عمل تعليمة الشرط 16 عند تنفيذ الاستعلام في حالة وجود خطأ يتم تحديده مالم 
ستظهر الرسالة "تمت الاضافة بنجاح" حتى لو كان هناك خطأ. لذلك وجد حل لهذه الملاحظة وهو كما في الكود التالي: 


( (5591 مرندت5) باعدعدك_11هوقتته! ) 12 

1 

( لمع ) عتمععع_175113ة . " :2#صضععظ ")01 
0 


"تست الاضاقة يتجاح" صقطعع 
(دمع5) 13ت _11هن متتس 





081١: 00967 0 1101‏ ا/ا 
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ايل 


لاحظ في سطر ؛ ١‏ اضفنا شرط 16 وبطريقة جديد لاحظ وجود علامة التعجب ! قبل الدالة وتعني (عدم) او (لم تنفذ) وفي هذا السطر يتم تنفيذ تعليمة 
ال1نو والاتصال «رم»8 والشرط هنا هو في حالة ( لم تنفذ الدالة ) أي فشلت في عملها يتم الدخول لما بين القوسين وهو اخراج كلمة (171*1012) 
ومعناه خطأ ثم نقطة (.) والتي تعني إخراج ايضا دالة (12295011_©11:01:)5012 وهي دالة إظهار الخطأ لعملية الاتصال او اي مشكلة في تنفيذ الاتصال 
والاستعلام ووضعنا المتغير ون8 وهو متغير الاتصال كما ذكرنا داخل الدالة كما تلاحظ, في عدم وجود فشل في الاتصال او الاستعلام لا يتم التنفيذ لما 
داخل القوسين ويتم الانتقال للسطر الذي بعده. 


في السطر 5١‏ عند نجاح العملية يتم طباعة واخراج رسالة "تمت الاضافة بنجاح". في سطر 5؟ دالة جديد ايضا وهي دالة اغلاق قاعدة البيانات 
وصورتها العامة ( )©13335011_©105 وما داخل القوسين نضع متغير الاتصال. 


نقوم بتطبيق عملية الإدخال للبيانات وهي عن طريق الفورم كما في الصورة : 


أدخل بيانات الطالب 


إسم الطائب محمد عيداك 
الجوال |888111222 
العتوان اليمن - سب 


مالاحظات الا يود متتحظات 





كما تلاحظ في الصورة تم عمل البيانات التجريبية وسنقوم بإدخالها بالضغط على زر (ارسال) أو (5111011116) وستظهر رسالة كما في الصورة: 


تمت الأضاقة يتجاح 
00 


نقوم الان بالذهب الى 12202112056 ثم 152)1111نام ام ثم قاعدة البيانات ثم 5010011 ثم الجدول 56306116 وسنلاحظ التالي كما في الصورة: 


5 خدرات 
يي جه ]| + ععالونات 121 عاأطمده 5طع2001 10 
تعديل غلا نسخ © حتف |1 يوسف صالح علي 9 اليمن - صنتعاء - أمانة العاصمة أدورة المواقع الالكتروتية 
2 تعديل 6 تسخ © حتف |2 نا لانا65 © 616 6©...لا6...لا+ 888111222 ©6266 - +لا... ناولا نا565 *6566,656)لا...لا 6-6 *ناوؤنا 65لا 


4__ 0 تحديد الكل مع المحدد. 2 ىم تغيير © حنف | ]| تصدير 


تم اضافة السجل او البيانات التي ادخلتها ولكن تم ظهورها بالشكل الغير واضح وبرموز مختلفة ولا مشكلة في ذلك. حيث يمكننا عرضها على المتصفح 
باللغة العربية كما سيأتي. 


0 0 00967 :ع |08 
لعلله . اة وكت زو “اإطفوة ا 0 00 1000 





إخراج البيانات بواسطة 517:1801 


تقوم عملية ال 561604 بعمل إخراج البيانات من القاعدة والجدول إلى صفحة مام أو صفحة الويب ويتم ذلك من خلال التعليمة 501 وصورتها العامة 
كالتالي : 


511101 110011 6314_2211 : 


كما تلاحظ يمكن أن تكون التعليمة كما سبق تم إضافة نجمة قبل 11200171 وتعني جميع الأعمدة في الجدول (8816_122126)). وهناك أيضا ثورة آخرى 
لعملية اخراج البيانات كما في الصورة العامة التالية: 


51111 011, 012 110011 1214_2212 : 


كما تلاحظ عملنا عملية 519110071 للعمود الأول (2»011) والعمود الثاني (0012) من الجدول (2116_12311:6)). سنقوم بتطبيق عملية إخراج البيانات 
من قاعدة البيانات التي قمنا بإنشائها 520110011 في الجدول 501016246 . قبل تنفيذ الكود والصفحة نقوم بعملية تعبئة للبيانات إلى الجدول من خلال 
الصفحة التي أنشأناها مسبقا لعملية 15614 ولتكن ٠‏ طلاب جدد ثم نقوم بعملية إخراج البيانات لصفحة ويب. 


بعد القيام بعملية إدخال بيانات للجدول ضمن قاعدة البيانات لدينا سيكون شكلها في 717127:2012312 كالتالي: 


هما ١‏ 
+ خبارات 


4 جه ]| ه إعنالونام تنلات عاأطوده 5طع2001 101 
(ها همي تعديل غ تسخ © حتف |1 يوسف صائح علي 9 اليمن - صتعاء - أمانة العاصمة دورة المواقع الالكتروتية 

2# تعديل غنة تسخ © حتف |2 لالالا65 © 16© 6...لا©...لا+ 888111222 © 626 - +لا... لاذلا نا05ء 05065 65866 .لا... لا ©- 6 *ناؤنا 65ينا 

تعديل غلا نسخ © حذف |3 لا5 66 ©...0ا©1+105 5١0‏ © لا© - 565ل+050*6” 0565 6566 .لا... لا ©-6*ناؤنا 65ينا 

مي تعديل غأة تسخ © حتف |4 ©لا05ن© _نابر6ونانا 5 696+6... لالا05” *650 ©6560 .لا... لا 6-6 *لاونا 25لا 

تعديل 6 نسخ © حدف |5 5نرنا؟© مانالا 56لا 2 2© لا ©6+65-© - 05065 56ئاينا “056 ©6560 .لا... لا 6-6*لا5نا 65 ,نا 

مي تعديل 6 نسخ © حتف |6 6لا5 6ر6 _ناونا 6+نا 9 نلنلاترنا... لا - 66-65©2 050+ 6565 6566 .لا... لا 6-6 *ناو5نا 65.نا 


كما تشاهد أعلاه ظهور رموز للبيانات التي قمنا بإدخالها. نقوم بحذف اول سطر وهو الاوضح بين الجميع ونبقي على بقية الصفوف التي ادخلناها. 
سنقوم بعمل صفحة بي اتش بي ونسميها مطم.)ء»ع56»1 في المجلد الذي فيه الصفحات مطام.)»اءوم وغيرها ونجعلها تقوم بعملية إخراج البيانات من 
قاعدة البيانات إلى الصفحة وسيكون الكود كالتالي: 


7 متا > 
تزتادرث > 
"1 صطعة" ,"", اباموع " , "ا ققط1هعهت1") نامع تدج _5)11 بتسححددت 5 


قص1طع م تدمع عا قصلطن “رم 
( () 21115ه_ناعع دمت _207511) 11 
1 
() 211:012_ناص ع طم _1071750411 . " :الئاكناكة منا نأا عقطمت م6 551120" قطعع 


_ 
1 
11 

- 

24 


( "5112 2128011 * 58111" ردت 5 ) لاعناكق_ 5157505113 > 5ال1نادع2ة 


( (512251111) لاقطاعة_طعناع11_12وودتتم - تامع 5) 311طه 
1 
[ " 112ظمسر" ] بجمع5 . " " , [ " عسمم ' ] بزمع 5 مط©طعكم 
- "تعزو" قلطاعع 


0 خم 855 35-7 رض 


لصمج5) 155 _11هن كته 
عر 
مط ره 


كر اآخثر آكخثر كر آخثر كن كن كين 


-[ 7 





0 00967 :ع اا8 ١/0‏ 
تلو فلاة وعت لوا للطيية 2 /0096 :2 عا اا8 ١/0‏ 


1ع .0 م طاععغ]. ثانالا نالا 





١”. 


كما تلاحظ الكود في صفحة م5©»16»04.012 في سطر 1 عملية اتصال بقاعدة البيانات في السرفر 1002112056 ثم كلمتي المرور (اسم المستخدم 170014 و 
كلمة السر فارغة ( ثم اسم قاعدة البيانات 520120011 وادرجنا ضمن المتغير :501. 


في سطر 75 إلى ١٠‏ عملية فحص للاتصال بقاعدة البيانات في حالة وجود خطأ ما يتم إظهاره ومكانه . في سطر ١٠١‏ عرفنا متغير واسميناه )11[1وع-1؟ 
ثم أدرجنا بداخلة دالة الاستعلام ()2235011_0]0617 وبداخلها عملية الاتصال بواسطة المتغير رمعة8 (راجع سطر 1) وأيضا تعليمة 501 وهي 
(5630626 011خ1"1 * '51111:01) والتي تعني استدعاء جميع الأعمدة في الجدول 5]10106126. 


في السطر ١9‏ قمنا بعمل شرط »77111 بداخله عرفنا متغير 417017 ويحوي بدخلة دالة ()2235011_1©4©1_21129 التي تقوم بعملية تنفيذ الاستعلام 
والاحتفاظ بالبيانات التي استعلمت عنها داخل مصفوفة (911:89) و 1116وع4 هو المتغير الذي يحوي الاستعلام ويتم التنفيذ بوجوده. في سطر "١‏ 
عملية إخراج لبيانات العمود الذي نريده كتبنا المتغير 8017 الذي يحوي المصفوفة والأعمدة كاملة ثم بين قوسين اخترنا العمود [©2921] ثم نقطة ثم 
إخراج فراغ كفاصل " " ثم نقطة وعملية إخراج للعمود [ع0201] من المصفوفة في المتغير 42017 . في سطر "١‏ النزول لسطر بعد كل اسم. 
والغرض من دالة الشرط »771011 هو المرور على جميع الصفوف في المصفوفة التي ستحوي جميع البيانات من الجدول 50101614 . نقوم بالان بتنفيذ 
الكود في 10021112054 للصفحة م11م.5©1601 وسيكون الناتج كما في الصورة : 


محاصاععاءة/1ممة/يادمناوعه| ثا ا تت أ 


محمد عيداتك 888111222 
أحمد حسن (انالاة 88 77 
قيصل صالح 222111345 
يحى علي 441333222 
نبيل صالح 999000999 


كما نلاحظ عملية الإخراج تم إظهار جميع الصفوف في قاعدة البيانات التي لدينا. وسيتم التطرق فيما بعد حول كيفية إخراج بيانات حسب شروط معينة. 


0 0 00967 :ع |08 
لعلله . اة وكت زو “اإطفوة ا 0 00 1000 





0 


نتعدبل وحذف البيانات بواسطة (:511:آ21:1 - 1228715]) 
من أهم عمليات المواقع هي التعديل على البيانات والتي نحتاجها لعملية التعديل على جزء معين أو كامل لبعض الصفوف او قاعدة البيانات. هنا سنتطرق 
لطريقة التعديل على صف معين بواسطة تعليمة ,56001 وهي 1377 1121(4 والصورة العامة للتعديل على أي صف كالتالي: 
'70001119'"-012» ,"اتاكنا؟' -011© 1ثآذ عتسقص_ع1اطج) 11 24آ1طنا 
:10-1 171211115 


كما نلاحظ في السطر الأول ذكرنا تعليمة التحديث أو التعديل 1121(41377 ثم الجدول الذي سنعدل في أحد صفوفه ©1:رهدر_»201) ثم عملنا أمر '5171 
والذي يأمر بوضع البيانات بدلا عن السابق ثم حدد العمود الذي نريد التعديل فيه وهو العمود 20011 وأدرجنا القيمة المعدلة فمثلا هما كتبنا الاسم يكون 
54 ثم فاصلة وذكرنا عمود آخر وهو 012 لتعديل الجوال وكتبنا القيمة كما تلاحظ. في السطر الثاني وهي الأهم ولابد من وجودها وهي الشرط لأن 
السرفر لا يعرف اي صف يتم التعديل فيه فتأتي هنا قيمة الشرط وأهميته بحيث يحدد في أي سطر يتم التعديل حيث كتبنا الشرط 757711111215 وتعني ( 
بشرط أن يكون ) ثم حدد الشرط وهو أن رقم الصف او السجل يساوي ١‏ . سيتم التعديل على السجل او الصف الذي يحمل الرقم ١‏ فقط ولا يتم التعديل 


تطبيق عملية التعديل : 


سننشئ قاعدة بيانات جديدة ونسميها (5©11001) مطابقة لقاعدة البيانات السابقة والجدول 10111 ويحوي نفس الأعمدة فقط سنغير اسم العمود 
11 الى 101 ويمكنك عملها بسهولة بنفس الطرق التي تعلمناها سابقا. 


سننشئ مجلد جديد داخل المجلد 775958 ونسمي المجلد الجديد والذي سنضع الصفحات فيه ب 1002066 . 
سنحتاج إلى " صفحات «1[م: 

منام.ع لمم 

مرطام.)ماء115 

مام.ددعء1:0م_ا"اء1115 

مطام.اتلء 


ممطام.عغء1ء0 


الأولى هي «رطام.02158» والتي تحوي بيانات الاتصال لقاعدة البيانات ونستخدمها لغرض استدعائها في الصفحات البقية بدلا من عمل كود الاتصال في 

كل صفحة. ولاستدعائها نستخدم دالة (©112211:01) التي تستدعي الكود الذي بداخل الملف. الصفحة الثانية وهي طام.)125©7 وصفحة أخرى تتبعها 
وهي (طام.ووع125616_710) التي تحويان كود الادخال للبيانات. الصفحة الرابعة وهي م14.017)© وهي الصفحة التي ستقوم بعملية التعديل على 
البيانات. صفحة ام.»]01616 والتي تحوي كود الحذف. 


وسيكون شكل المجلد وما يحتوي من ملفات كما في الصورة : 


١/08 ||: 00967 0 171100‏ 
الا أع0.هأم داعع10])0©1 :الهمصع ‏ 772755202 2:00967 5 ||8 ١/60‏ 





١ ”1/ 


عل اه] بيع لذا ]نا * تاغانها عرقطدة * بضوعطنا صا عوساعمآ > ععاصوو01 


2 


111 11م عغ03] عممةلةا جع وياوع د 


#مقع5 ملام (1:53١٠مه6ء-/2+١/15ء‏ وقممء :”” ممغاءء 0 1 
أمق5 ملام .ءناء ص ١١١2/١5/١١‏ عاعاءع0 :7” 00/0 1 
خمقء5 ملام لاأءنقء ص *+٠١12/+2/1١‏ +زلء ؟” كعع واه غمععع8 5 
#ممع5 ملزم  ٠١٠:61‏ مم١‏ /ئ+ء*/1اء 3 
أمع5 18م 2 7+ م لالا/رلا١‏ /115١؟‏ رع كم :5 5ع0قوط ا 
#مقع5 ملام ١مب١ء‏ م "١15/١‏ ككعع0]م_رع كما :7”" كأمع درناءه0 23 
أكنال/اا الى 
كعنا 1م ا 
دمع ٠/10‏ كل 


منامروع مرولا زو 


عنام ره © اللقار 
(ع) عادزه ادها ولك 
(:0ا) عحدساهل/ا معلا ى 
(ع) عدداملا معلا ى 
(ع2) عدحداملا معلا ى 
عصمطط 5 أعكناملا نا 


عام سي لخم اا 0 


5ع 6 ل 


قبل البدء في شرح عمل أكواد الصفحات اعلاه نقوم بإظهار صورة لقاعدة البيانات التي سنعمل عليها من انن ملام وهي كما في الصورة 





لل 7 89 خا ث#ه 2:6 الالاض اام 7360167471#ععءطط09ع516ع2ع1580461 - مععامية مامعهةامعء_اطأحئععوء ميق مع ل رند ع اطمي8 اممجاء و طال7مطامءاع لم /متحملح. 





ا 0 لك 


5 325 واروناهيعم0 ثقى أزرممصا لكا إرممعيع هن غيعكما 326 طعنهع5 لما له5 لغ عنعنىن5 ثم عوبممق 3 


ملاعم 3ط اانسوقعنا ااناطا كعأتاطلعم وملغواامي) عملا عحمدلة # 
نال أ10أوانا [5] دع اانا 9 ا31أغأهم5 75 عاعنها ك0 عدوادنا إن لمقصمط فق مهنا © عومدطن 2 اللعاالاع 08 )1ةا_0الاطظ ‏ عممل/ ول" (06)4! 12 1 [) 
5 أ06لأوانا زح لماع ةاانط [7)] أقلأهم5 5 عزع0ى! زحن عدوادنا إن لمدصملط في مماذنا © 3098 تق ع 1/07 ولا [ط_قأنا (31)55اع:3/ا عقوم 2 [) 
نال أع0نأوانا 5 6دعاانط [5) ا12غدم5 75 »عنما كن عدوامنا إن بمحدصلرط في مهنا © 030902 تق ع07// ول" (14)غ2 عاأطمم 3 [) 
5 أ0أوانا [] اع ةاابنط [3 |13أهم5 75 »عنما رحن عدوادنا إيق لمقملط في ممءنا © 3098 ع عورولق/ ولا [ط_6أنا (3:)66اع:73 55وع:200 4 [ ) 
نال أع10أوانا 5 6دع اانا [5] |13غدم5 75 »100 كن عدوامنا إن بمحدصلط ف مهنا © 030902 تق ع07// ول" (ااط_وتأن (3)100تاعرقن ]20 5 [)] 


“160 45 عدوامنا 50 لمقصلط ضقي مما © هعوموطن) تي و5سم6 5] *0ع1عد/ع5 ]اا الث عاع018) [ ) 1 


5نامع علامااا 55 © عاناأعنارأ5 عا130 ع05م00 لتر 





الاع آلا 100أ3اع8 8ك ااعانا أمط ول 


(ه») . 10 عم )0 عاطق] آه ووتامواوع85 غم () عاطد] أه لمع غم © (و)مصنامء ظ 1 00 3 
5 + 
١‏ 10 رهما ل 
5215115 رنا0] 5036 
عصيجه خآ 0 
ذج_عهومت خصنا_8 2 عن ممعوالومع لكا 15 هنا 
22 *ا 70 أمأناج أجرع ل! 56 عرعنه! 
كله 08:45 32 2014 ,10 عصة م نا 16 اهاده1 








كما في الصورة نلاحظ الصورة وهيكل قاعدة البيانات والأعمدة الموجودة فيها. 


0 /00967 :ع اا8 0لا 
و ت 11 لضسيوة 2 2:00967 اا 0/ا 


ع .0 م طاععغ]. ثانالا نالا 




















صفحة «رام.ع211م» 


الزلادر 2 > 


(*"", "امومع" ,ردقم ط لقفعه1") أععقصدت_لوقتته - صصمدت 5 
( "لعجت عقطمع عأامنصمصدع " ) 01 عره 


(لقصدج؟ , " امصطع 5 ") طة_طاع ع 1ع5 _1ن 5تتدة 


1 
4 
5 
حَ 
7 
8 


2 





كما تلاحظ أعلاه في صفحة «[طام.201355 في سطر ” عملية اتصال بالسرفر من خلال دالة الاتصال ( )3223501_001116041 » تم الاتصال بالسرفر 
1 ثم المستخدم 12004 ثم كلمة المرور داخل علامتي تنصيص وهي فارغة لأننا لم نعين كلمة مرور للسرفر المحلي الذي نعمل عليه ووضعنا 
هذه البيانات ضمن المتغير 50[1112. 


في سطر ؛ في حالة عدم الاتصال لأي سبب أو خطأ هذا امر بإعطائنا جملة الخطأ وهي 2011160401 204 2312© . في سطر " دالة الاتصال بقاعدة 
البيانات من خلال المتغير ورم50 الموجود في السطر ” ويحوي بيانات الوصول لقاعدة البيانات من السرفر. 


صفحة «دام.):دء25ؤ وصفحة «[طم.ووع125616_71:0 هي نفس الصفحات التي تعلمناها في عملية الإدخال للبيانات لم نغير سوا اسم قاعدة البيانات 
من 520120011 إلى 5212001. والأكواد كما في الصورة: 


صفحة «رام.]"1ء105 : 





<112-872حتج 23585 شطع 2 القع رع عدم ع "احج ورم ومع "صوري 1 2 رمع ند" 2 1ناوم ع ورعا عط قع قلدرهةع 5 


آلب 


13631112 أع 2512515212538 


"دونع ارعبرمع "اعم ور 215 5ه 8 

1 121 اع 5 . 59 
15ت [1: 123331 قلط 11 
:عزنا ناك : طع 713 11 

251 : قات 1 ادمع 841 9 
201 : عتم1مع 13 

525211 11057 ."لتقلا 127 111025" :117 لاقت 120111-12 14 
2513 : 1ن 1 15ت 1 1 

15 1 011--51 255 : 1 58 

جم 29903 55113 :عع عمط 17 

تتوة نم3 عدررة : 621115 دع-ع م عوط 8 
22 كعتررة عرة عردك : 5 دن مهم 19 


ده 2171 رج | قيس 

0ق 115 ار > 2 

اعالة ساك ا 

لعرااة داوف ا 

<8525212ج / > أدخل بياتات الطالب<طعدجعج رمح | نم 

0212122 ناظ 5-5 1535 203173 ك2 

د/ر خدطه | نت 

"2551" -111050 1212 "ورتاص . 3ق 1205جم_ماطع 1115" -1105121 3 210211 1 


إسم الطالب 0ك 

حد/, عتطهه " صورحع م" حدم رمم "7 عاعومع "7 عمو ات 1 > إلا لب 
الجوال أ يفك 

د/,ر عدط>< "12 اطموع" عع رمم "عرع طاسددم" حم وري بالاترت 1 > 31 
العقتوان 32 

حمر عدط><" عوع12 0ل ع 221185-7 " عاعرمع "حتت و 11ت 1 > 53 
مفلاحطظان 5 


دمر عطه5" بلاحطات"1112-7ت7 "”عمن" ع عنتقم "عأيجم ع "7 عم و خا 1 > 55 
<<" عا لنتطنا ع "حوري 22111 1 > 2 

12121 نت 2 / > 0 ريرح 

<313رج | داكت 

إدتدمط,/» | كك 

111101 > اك 


صفحة «رام.ووء111561]_710 


. 0 00967 :ع اا8 0لا 
أع .0 م طاععغ]. ثانالا نالا 


تلوافا» لوكت تسلو للصيية 2 2:00967 ]اتنا 





<<" انلقع طع 97 199 ثري ع0 . 13 . اج ثر ثر : وررع 5"”-3215 501 لتتعاطاع 

> 115 301 

دم "28 1احعع مع فطع : لققع ا سمج "احج ورم ورمع "مور 1 - لق عط ورم" 7-2 1 ناوه ورج 112 3ع18ةه 
21212 »و وعمعمومعمط 2م2215 11> 

1150 ار > 

لعراناء هاه ا 

لزلاجر 2 > 

("1صصقطعهد"” ,"" , "ناموط" , "31 قط الهعه1") نامع مدت 5411 تومت 5 


[ ' عتتقد ' ] 2051 _5© ععسسمورة 

: [ " 31طمهس' ] 5051 _وحع 1 تطمددة 
1[ '"35ع5002 ' ] 2051 _وحد و وعع 500 
[ "عمد ' ] 20531 _وحع يان 50 


مت ,5 ععققت ,112ظطظقضد , تتتتقط )ا عضت فتاع 5 111110 1115521 "> 51 5 
ع" ز "عط ممسة ' , " 38عع2 2500 " , " 12 1طصضهرة ' , ' عتتقدة ' ) 5 كالاملتقى 


( (5591 ,ردح 5) باعدعناق_2159511! ) +11 
1 
( لدت 5) مععع_11هن دمتهس ٠.‏ " تخلرض عع" ]4132-10 
َ 

"تست الاضاقة يتجاح" قطعع 

(صطدع5) 155 _ 5750411 

2 

مط ار 

< لتنتعاطا رع 





.7 
ا 
95 
000 
بوسر 
5 
طلا 
و 
ل 
بوسر 
95 
اط 
و 
ل 
حط 


ل 


وتظهر الصفحة 12567.01 كما في الصورة : 


9 +« خض مب مام مع كماع 2لمنا/أوهطاقءه! ذا 
أدخل بيانات الطالب 








بعد تعبئة الحقول وكما تعلمنا سابقا يتم استدعاء الصفحة ممطام.ددع©11151:)_21:0 لتقوم بعملية ادخال البيانات للجدول. 


صفحة «رام.12016:2 : 


وتحوي هذه الصفحة عملية استعلام بإخراج جميع البيانات الموجودة في الجدول )5610161 مشابهة للصفحة التي تعلمناها سابقا («رطم.]ءععء5©1) 
وسنقوم بعمل جدول لعرض هذه البيانات وامام كل صف يوجد رابط باسم تعديل وايضا رابط حذف. وسيكون الكود في الصفحة كما في الصورة التالية: 


الجزء الأول من الكود : 


: 0 00967 :ع اا8 0لا 
ع .0 م طاععغ]. ثانالا نالا 


اتاو »وات 00 6زوا الضيوة 2 /0096 :2 ع اا8 0لا 
































لزتادز2 > 
211 نم1 عت م نضدمه 582 قطوع 5ك فطع 10-1101326 ار / 
("”صطح . 11 دده" ) 1-1110 


(21235 تأطعده 3ع 155) ععلوعطه ونتلمددع 5 02 12 93455 وسستنطحع ات 2 ر/ر 
("5ظ1ط 1 815 لطظاللظن عتصع ونا 5 8101م م 551" ) تاععناق_1ن دبتس-ط 1 تادعم ؟ 
عل 


1 
5 
3 
5 
ع 
8 
9 


اع اه 

2812812 /> الرئيسية <515182> 

0ت 12 > 

دمر "2-8 بط ماه دعت قلطت : للتط رع ورمع "عت ورم عأاورمه ‏ " عور 1- تت أونه "1-7 ناوه لوطاغط وعاعدة» 
30 15 > 

لعرااء ساد 

2<" 21212 : 2131 طأصمع 5125715-01 20119 

< لطع < لعاطعدة /» إقاقة جديد< "وطح . عع مم1" 1عغعط وع 

لتتادر > 


"اجتع مرا ودع حت ون 511 (احع مللعمط "55 ' خطع ك0 1 « الطوع >" مطعه 


ع "131ل " خع و 1لمحقط عع هع" مواحهت 
: "حلط رع ا الاسم <20 >" قطعع 

""<60/م» الجوال<20>" صطاعع 

"502 /,» العتوان<مع»" ملطعع 

"لاط “ر# نلا حظا ت23 20>" ملاعم 

: "تلع /ر»تعدبل 2052 >" قمطعع 

"الجتعرع ري" ملاعم 





كما نلاحظ في الصورة والكود أعلاه في سطر ١‏ بدأنا الكود الخاص بالملام » في السطر ” عبارة عن تعليق والذي يكون دائما باللون الأصفر ضمن 
أكواد البي اتش بي والمسبوقة بعلامتي سلاش // والتعليق لمن يقرأ باللغة الانجليزية ويشرح التعليق وضيفة السطر الذي يليه أو حسب ما يريد 
المعلق أو من يكتب التعليق. 

في سطر “" دالة التضمين 122111016 والتي اضفنا بداخلها اسم الملف الذي يوجد فيه عملية الاتصال وبياناتها. في سطر ه شرح لما في سطر " والذي 
يحوي نص الاستعلام بواسطة دالة الاستعلام 225:501_01119 وبداخلها طلبنا عملية اخراج جميع البيانات من الجدول 116ع610و: ثم اضفنا خاصية 
جديدة وهي 8357 0121771112 والتي تعمي (رتب بواسطة) ثم حددنا ال10 ويعني الرقم ثم حددنا ماهية الترتيب وهي 110500 وتعني تنازلي أي آخر 
بيانات طالب تم ادخالها تظهر في البداية. وعكسها التصاعدي وهي ١)45.في‏ سطر " أغلقنا كود البي اتش بي. 


من السطر ؟ الى السطر ١5‏ أكواد تعلمناها مسبقا يمكنك المرور عليها ومعرفة وظيفة كل كود أو سطر. في سطر ١7‏ فتحنا كود بي اتش بي في سطر 
1 فتحنا جدول بواسطة كود 2117 وكما تلاحظ وضعنا خاصية العرض ٠‏ 05”؟ ثم البوردير او الحواف وحددناها ب٠‏ صفر ثم خاصية التوسيط ووضعنا 
قيمة وع)عح وتعني وسط. وسيظهر الجدول في وسط الصفحة. علما اننا نحتاج الجدول للترتيب والتنظيم. 


في سطر "١‏ فتحنا صف وهو الاول وهذا الصف سيكون عبارة عن راس الجدول والذي سنضع فيه عبارات (الاسم - الجوال - العنوان .. الخ). لاحظ 
اننا فتحنا الصف الاول في 5١‏ ولاحظ انه انتهى في سطر 77. من سطر 7١‏ الى "7 عملنا خلايا بالترتيب الخلية الاولى في سطر ؟ ؟ تحمل الاسم 
والخلية الثانية في سطر ١7‏ تحمل الجوال وهكذا الى سطر "؟. 


الجزء الثاني من الكود لصفحة «طم.12016©:2 : 


0 0 00967 :ع |08 
لعلله . اة وكت زو “اإطفوة ا 0 00 1000 








1 ((53111ع522) تاقطاعةت_طعماع 2 _1نوقت:7تسددع 2 5) 1 قطم 


: "اوعر عه" وحناعكت 

"اط ثري" , [ " عنسقهم ' ] قمع 5 , "أجلم >" م9اعع 

"تلج / >" . [ " 15 1طمه ' ] دمع 5 , ""جلمع >" ملاعم 

"اعمط ,>" , [ " مدمع ممه ' ] دمع 5 , "جزم >" مطحم 

"عقر" , [ " موامم ' ] دمع 5 , "جم >" مطحم 

"0127 /ر تق / #عدق“< ' [13] 223 0-5 21 وطح . 262 1ع0 2-١‏ معط 3ه | <3/»تعديلة ' [12] قمع 1-5 صرطم . 1مه "جع فعطظ ومد ل >" ملاعع 


ا ذبا ذنا با دنا ينا ذا كد 
كر 5 35-7 إرض 


/ 
"اجت طوعطع ره" م؟عم 





كما نلاحظ من سطر 75 إلى ٠‏ ؛ نريد أن نقوم بعمل إخراج البيانات من جدول الطالب في قاعدة البيانات وبما أننا قد قمنا بعمل الاستعلام في الجزء الأول 
من الكود سنقوم هنا باستدعاء البيانات حسب الاستعلام ونقوم بإخراجها كاملة بواسطة الشرط »70111 . فكما نلاحظ في السطر ١5‏ داخل الشرط 771116 
قمنا بعمل دالة الجلب للبيانات ()7223501_16411_211:29 للمتغير الذي فيه الاستعلام وهو 116:وع4 وادرجنا هذه البيانات ضمن المتغير الذي سيقوم 
بعملية العد او المرور على كل صف في الشرط ويقوم بإخراج البيانات وهو 81:5 . 


في سطر ”١‏ فتحنا صف جديد »في سطر ؟" فتحنا أول خلية وهي للاسم ثم استدعينا المتغير 415 أن يخرج لنا ما في الحقل في قاعدة البيانات الذي 
اسمه عنررورر ثم أغلقنا الخلية. في سطر “7” نفس الخطوة السابقة ويتم استدعاء بيانات الجوال الموجودة في المكان او الحقل »210111 في قاعدة 
البيانات ثم نغلق الخلية. وهكذا في سطر 4 ” وه" . 


في سطر 5“ تذكر 101 شالش اتش ٠‏ ) أقذا شر الس ١‏ الفإئعلة الاك لظ الاسم ثم الجوار. /العنوان ثم الملاحظات ثم نفتح خلية 
ايضا زيادة لنضع فيها رابط مكتوب فيه تعديل ورابط اخر رابط للتعديل. 


قبل شرح السطر 5” تعلمنا كيفية استدعاء البيانات كاملة من قاعدة البيانات هنا نريد ان نتعلم كيف نقوم بالتعديل على صف معين ولأننا نريد ان نعدل 
على صف معين فلابد من معيار معين يساعدنا في التعديل على الصف الذي نريده وقد ذكرنا مسبقا ان في قواعد البيانات وفي الجداول بالتحديد يوجد 
المفتاح الاساسي فيها او ما يسمى (79ع>1 21121:17) أو رقم كل صف في الجدل له رقم محدد لا يتكرر ابدا. من هنا نستطيع ان نعدل او نحذف اي 
صف بواسطة هذا الرقم او المفتاح حتى لا يتم حذف او تتعدل صفوف أخرى. 


في السطر5” من بدايته الى نهايتة يكون بين علامتي تنصيص ثنائية " " لا تتكرر بداخله ونضع علامتي التنصيص المفردة ويمكن تكرارها على ان 
تكون بالشكل الصحيح. من بداية السطر إلى علامة الفصل | المستقيمة سنقوم بعمل رابط للتعديل بدأنا بعمل خلية ثم رابط يوصلنا للصفحة «رطام.)01»© 
وهي الصفحة الخاصة بالتعديل وأن تكون بين علامتي تنصيص .نأتي للأهم لاحظ بعد اسم الصفحة مباشرة ([710-941©5]10م17م.016ع) قمنا بعمل 
علامة استفهام بعد اسم الصفحة والتي تشير إلى ارسال شيئ ما مع الرابط ثم عملنا متغير وهو 410 وأدرجنا بداخلة رقم الصف من خلال المتغير الذي 
يقوم بعملية إخراج البيانات بواسطة [4565]10 .ويصبح المتغير هنا خازن لقيمة رقم الصف في حالة تم الضغط على رابط تعديل يقوم الرابط باخذ رقم 
الصف إلى صفحة التعديل وتقوم صفحة التعديل بأخذ الرقم للصف وتستدعيه لتعديله مباشرة. بعد ذلك اغلقنا علامة الرابط الاولى بعد علامة التنصيص 
ثم كلمة (تعديل) ثم أغلقنا كود الرابط. 


في نفس السطر وبعد علامة الفصل | ايضا نفس الفكرة تماما عمل رابط لصفحة الحذف واسناد رقم الصف للمتغير 810 لإرساله لعملية الحذف في 
صفحة الحذف «وطام.ع]ء161. 

لاحظ من سطر "١‏ إلى 5" تتكرر العملية مع كل صف في الجدول بواسطة الشرط إلى ان يتم الوصول إلى آخر سجل او صف في الجدول وكل صف 
يخرج في صف مستقل مع كلمة تعديل وحذف. قبل مشاهدة الصفحة او فتح المجلد نقوم الان بتعبئة بيانات للجدول من خلال صفحة 117م.<12016 كما 
في الصورة نضغط على الرابط (إضافة جديد): 


0 /00967 :ع اا ١/08‏ 


أ 10.1 طأعع]. الا اناالا أعم.هأمطاءعة]1©م)مأ :اتهمع ‏ 772755202 2:00967 8 ||ا8 ١/0‏ 





52 
تت ذا 7 9 4 9 وال محامءاع ل وا/ع36لمنا/أدهطأةءه10 ذا 
إضافة جديد 


الاسم الجوال العتوان ملاحظات تعديل 


بعد الضغط على اضافة جديد ستظهر الصفحة [طام.125©11 والتي تطلب بيانات نقوم بعمل بيانات عادية لثلاثة صفوف وسيكون شكل الصفحة الرئيسية 


ل ىا 
مطم.06نز كالتالي: 

خ# 2 “امي جا # اي؟ ملام ءاء10/مع3ل0مد 
ضماقة جديد 

الاقم للجوال العنوان ملاحظات تعديل 

حسن أحمد 1 92 سوريا - حلب لا يوجد ملاحظات تعديل | حذقف 

عامر عبدالجليل 1+9 اليمن - عدن لا يوجد ملاحظات تعديل | حذقف 

يوسف صالح 5 1 اليمن دورة المواقع الالكترونية تعديل | حذف 


قمنا بعمل بيانات تجريبية كما في الصورة السابقة. 
صفحة مام.116» : 


طريقة عمل صفحة «مام.)ن0» : في هذه الصفحة بعد الضغط على الرابط تعديل امام اي صف نريد تعديله كما في الصورة اعلاه تقوم الصفحة 
مطم.0016ن: وكما وضحنا سابقا بارسال رقم الصف المراد تعديله وفي الصفحة «رطم.014» نقوم بعملية استعلام من هو صاحب هذا الرقم من الجدول 
في قاعدة ابيانات ونخرجه إلى فورم كما في الصورة نقوم بالضغط على (تعديل) امام (حسن أحمد ) سيظهر في صفحة ط[م.0311» كما في الصورة: 


3/ 
بال 


واب 0-0 7مطام.ألع/ع36لصمنا/أدوطاقءو| ذا © 


الجوال ‏ 987654321 
العنوان أسوريا - حلب 


7 يوجد ملاحظات 


يد 11١.‏ 
مالاحظات 


كما في الصورة اعلاه تم استدعاء الصف المراد تعديله بواسطة استعلام من خلال ال1:1 التابع له. لاحظ الان الخطوة التالية هناك رقم ال1)0 للصف 
موجود في الرابط اعلاه وهو ٠١‏ ومشار له بالسهمء هنا نحتاج له في عملية التحديث. نقوم الان بعملية التعديل على البيانات مثلا نغير الجوال. بعد اتمام 
التعديل ونقوم بالضغط على زر (تحديث) وتقوم الصفحة بأخذ الرقم 10 لهذا الصف والذهاب لقاعدة البيانات وتعديل البيانات المعدلة للصف صاحب الرقم 
0: من خلال طريقة ال 7054 التي تعلمناها مسبقا. بعد التعديل يتم توجيهنا الى الصفحة الرئيسية بواسطة كود معين سنشرحه فيما يلي. 


بف بف 


وسيكون الكود الموجود في صفحة 17م.016» كالتالي: 


11111 0 00967 :|08 ا/ا 
الا كسا أ0.و1مداءعع0]0©1مأ :اأهمع 2 772755202 2:00967 8|128 ١/0‏ 








لاد > 
( ""”صطاع . 19 مده ") فصنت _ع121110 


((1'ع022 جنا ' ] 5_2051) جاع155) 112 
1 


]555 5 د وده 

[ ' عسهد ' ] 20531 _و تعنم م5 

: [ '312طمم' ] 52053 _قعهع 1 3طمدة 

[ " 8دعع ممه ' ] 2051 _وحووع2 0 له 5ج 
[ " عامط ' ] 8051 _وحعم مرج 


عالطوةع عطع وسضاع مهومن “ىر / 
" ععامطة ' دع امم م "550022335 3 -35 30022 , ' 12 1طممة ' -12 لطمد, ' عسدمة ' تع متمد 3511 اطع اناك ظ11قلا112") باعدع دك _ 1ن 5 تسح ط 11ادع22د5ة 
: ("13-513 لععممر 


وطح . 12031 15 18 م3هه تتتات 12 .5302 13ج 031 فطع ومع ولاعطعهم2 المع ار 
(""صطم . 12:02 : لنت 1 متمفعصضة" ) عدم همعطا 

0 

2 

مزلادرة > 

11 تمع 14 موعن /ر/ 

-1]'14ظتا_ت > 513 


ملاتا 31ج قتطء طع 1 3555313850 0553 وستععع 11رمع “ىر / 
("7 10-251 مع عفطظم عاصم لناع ات مرمعع م عات 5212 '"" ) ادع ناك _ 1ن قتتسك-ط 1 نادعع ي 


( (3111ع52) تلاقععة_طععاع2 _1وه تتسددعع 5 ) 11طم 
1 

[ " علقم ' ] 5ععة > معنسمرة 

[ " 3112طمه' ] د5ععة5 - 15 7طصرة 

[ "02د ' ] مدع 2 مع م2 01د 5 

[ " فعمم ' ] قمع 5 2 ومعوورة 





في الكود أعلاه سنقسمه الى نصفين من سطر ه إلى سطر ١5‏ لن يتنفذ من الكود أي شيء مالم يتحقق الشرط في سطر ؛. وهو في حالة ملئ الحقول 
بالبيانات المراد تعدليها بواسطة 22025971 يتم التعديل في قاعدة البيانات. أي في بداية تحميل الصفحة وقبل ان نعدل يمر السرفر من هذه الاوامر ولا 
ينفذها الا بعد الضغط على زر (تحديث) لذلك يذهب للتنفيذ من سطر ”77 . 


الجزء الثاني من الكود: 


< لاقتعالا 36 

1212 ترم#قعط 13[ 1035ده 5121ه» رك 

38 > 112 301 

دم "2-87 16ح ع مقع قطه 2 2701 رع عرمع "7 حج ورم طاورمه ‏ "عور 1 16ت وه" - نان مسورطاغط وعاعنده» 59 
لدع / > | الات 


77 1ط > 

<" 1122اتق 851323:1 قد :522لا ناك : طع 1< : 251 : ذده عع 5-781 52171 20139 
<ة »> الرئيسية <"صطص . دع 0ص 1 "عط وي 

< ارطع “رعرط» 


اك 


415 كك 
يذ كنا كر 





في السطر أعلاه كود عادي 5” الى ؛ ؛ عملنا عنوان في سطر 7” ثم كود اللغة (ترميز اللغة العربية) وهو مهم في سطر 5” في سطر ” ؛ عملنا ديف 
وبداخله خصائص الاتجاه من اليمين الى اليسار ثم العرض حددنا ٠٠؛‏ بكسل ثم المسافات لليمين واليسار وجعلنا الديف متوسط في الصفحة. ثم رابط 
واسميناه الرئيسية ليتم التوجه للرئيسية في حالة التراجع عن التعديل. ثم كود للنزول سطرين في سطر ؛ ؛. 


في سطر ه ؛ إلى 75 أنشأنا فورم الذي يقوم بعملية استيراد البيانات المراد تعديلها والكود كما في الصورة: 


: 0 00967 :ع اا8 0لا 
ع .0 م طاععغ]. ثانالا نالا 





اتلوافا» لوكت 1ت علو للصيية 2 2:00967 اناا 


2" ”حت رون عراصت "انوج" حل مط جاعم " عدت 281115-72 1012111 > 
5" ”جرع روط القع > 
لاما > 
<20 /ر >> الاسم <101> 
العام سق 
201 “رج < 1 222 م 2512137152 صمطعه حرطم »> ' -12 1ت "عندت م" 5712م "يردج 7 عدم وريتع انامز 1 > 
جع رع 
لاما 
<0/» الحو ال<0> 
10> 
العا سراف 221 12 3طمدرة صمطعه حرام » ' دمن هدج "157 1طمم” - نتمم "عجعرمج "عدم ريت تانر 1 > 


120 / > العتو ان<50> 
11> 
21 > < 221 :م 550322353 صمطعه حرطم » ' -12 1ت "7م مدع نمق " ع م رمم "يودج 7 اتويت اناتور 1 > 
< 12 رك 
داعا + 
<20 “> ملا حظا ندل > 


8 رفظ 5 


لاغ 0 


ا 
9 
1 
1 


جقع رجه تدمع م عطيرمح “رمح 2 اجم 6م25 مطعه حرطم هد" "حو وروم "217 "عم رمع "معومن"” عدم رمم دمع م نارمح عجنلا »> 
1ع رع 
مد لاما > 


12 ر> <227<21 [ "١1241‏ ] 81ظة_؟ مطعه ترطاطة تك " دمن 51م "137" حت تيمم "5105" عدم ورين عاتايرت 1 1202-2 > 
<0ع / >" تحدنت"-751116 "ع ممصن -21252 م "عا تسطدردك "م و1 الاجم 1 02> 
1 / > 
دع 1طقخ /ى > 
202112 “رع 
017 “ره 
مط رجه 





ناتي للشرح: 


كما ذكرنا سابقا من سطر ه إلى سطر ١5‏ لن يتنفذ من الكود أي شيء مالم يتحقق الشرط في سطر ؛:. في سطر ؛ شرط في حالة تم تنفيذ 10051 
الخاص بالقيمة 170124 والموجودة في الفورم 7011311 من سطر ه ؛ الى 77. سيتم الدخول في محتوى الشرط. في سطر ؛ إلى سطر ١١‏ يتم عمل 
577 للبيانات من الفورم الى داخل المتغيرات. تقوم هذه المتغيرات باستلام البيانات بعد تعديلها والضغط على زر تحديث. 


في سطر ؛ ١‏ إلى ١5‏ يتم تنفيذ التعديل على الاعمدة واستبدال البيانات القديمة بالجديدة الموجود في المتغيرات والمستقبلة من الفورم بعد التحديث 
بواسطة الرقم 10 الذي تم الحصول عليه من الفورم. في سطر استخدمنا دالة جديد وهي 102061 والتي تقوم بعملية التوجيه عن وصول السرفر 
اليها يتم تنفيذ الأمر الخاص بها والتي تقوم بعملية اعادة التوجيه الى الصفحة 1م.ع1201. 


في سطر 7 إلى سطر 5" نعود إلى ما قبل عملية التحديث : في سطر 7 نقوم بعملية اخذ رقم 10 بواسطة "171 من الرابط المشار له سابقا ونضع 
الرقم 10 في المتغير 410 ثم في سطر 5" نقوم بعملية استعلام عاديه حول الصف المراد تعديله حيث نستورد الصف بشرط الرقم 10 كما نلاحظ في سطر 
5 بواسطة الشرط (10-510 »:1ع؟). 


من سطر 78 الى 4" نقوم بعملية جلب للبيانات الخاصة بالصف الذي سنعدله ونقوم بوضع كل قيمة في المتغير المناسب كما نلاحظ ذلك في الاسطر 
"٠‏ الى "”. 


من سطر 5؛ الى سطر 7 قمنا بعمل الفورم الذي سيستقبل بيانات الصف الذي سنعدله وفي نفس الوقت الذي سنعدل فيه ما نريد ثم يقوم بإرسال 
البيانات لنفس الصفحة او الشرط الذي تكلمنا عن انه لن يتنفذ الا بأمر من الفورم. في سطر 45 فتحنا فورم واسميناه 40771 ثم تم تعيين الطريقة 
577 ثم الاكشن (2011012) وهو الاهم فقد تعلمنا سابقا ان نقوم بعمل اسم الصفحة التي سيقوم الفورم بإرسال البيانات اليه بواسطة 72051 ولكن 
لأن التعديل والارسال سيكون في نفس الصفحة سنضع علامتي تنصيص فقط أي انه لا يوجد صفحة يتم عمل «ز2»)10 خارج الصفحة «طام.)ذ» لذا 
نتركها فارغة أو نضع اسم 1م.014» . في سطر 45 فتحنا جدول ثم صف في 43 ثم خلية في 48 وكتبنا فيها الاسم ثم خليه بجانب الخلية ووضعنا 


١/081: 00967 0 1‏ 
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فيها حقل من نوع ]2ه وقد تعلمنا سابقا كيفية عملها وخصائصها والاضافة الجديدة هنا هي 721036 والتي سنضع فيها بيانات الصف الذي سنعدله. 
لذلك كما نلاحظ الخاصة 721036 في السطر ٠.٠‏ والخاصة بالاسم بين علامتي تنصيص نقوم بعمل استدعاء البيانات او الاسم الذي جلبناه في سطر ”٠١‏ 
من قاعدة البيانات. وهكذا مع بقية الحقول في الاسطر الاخرى. لاحظ في سطر 55 لم نقوم بإخراج الرقم 11 لأنه يعتبر سري لا يظهر للأخرين فقد 
عملنا جلب له ولاكن ليس من قاعدة البيانات بل من الرابط بواسطة '71771) واسندناه في المتغير 810 والذي سنحتاج له في عملية التحديث في السطر ٠‏ 
والسطر .١5‏ 


صفحة ام.ء]ء0161) 
بعد الضغط على رابط حذف في صفحة ممطم. 11101 أمام اي اسم من الاسماء يتم التوجة للصفحة مطام.غعغ)ء1ء0 وكون الكود الخاص بها كالتالي: 


لتتادر 2 جه 
211 طنة1ةعطع دمت 562 3طةع 345 غطء 1211113125 ار / 
- ( "عطم . 11-3 دادع " ) 111211105 


11 لتصعع قعمة عطع كه 134 وسمتعطعن /ر/ 
]1 ؟ - ودهة 


1 
َ 
5 
4 
5 
5 
0 


م اطقع ممع جامع قرع وسصدعت لمعل ىر 
: ("10-5312 عطعطه ماعنا 5 11011 10181111" ) تاعدعناكت_1هو د تسح 1 تادعم ؟ 


(صطم . 1203122 همهم مق1ج5 03 فطع م6 وممتاععم2 ونممع رار 
("”صطح . 502 1 : ددم 1 عتقعصضة"" ) 11553021 
عم 





كما هو في الشرح باللون الاصفر. في سطر إن عملية الاتصال بقاعدة البيانات بواسطة دالة 6 والملف المستدعى هو ررطام.115م» »في سطر 
5 عملية الحصول على الرقم 10 من الرابط الذي تم الضغط عليه(حذف) وضعه في المتغير 810 ثم في سطر ١‏ عملية الحذف وهنا استعلام بعملية 
الحذف للصف الذي رقمه داخل ال11 . 


في سطر ؟١‏ عملية توجيه للصفحة الرئيسية مباشرة بعد الحذف م12016©:.01 حتى أنك عند الحذف لا ترى الصفحة ع2ع061 فقد ترى ان العنصر او 
الصف الذي حذفته قد تم حذفه وتم اعادتك الى الصفحة الرئيسية. 
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4 
التعامل مع الصور 


إضافة الصور 


تعتبر إضافة الصورة بواسطة مام مع ال75453501 من أهم وأساسيات المواقع الالكترونية والتعامل معها سيكون بسيط إن شاء الله وسنقوم بتطبيق 
مثال بسيط حول كيفية رفع صورة إلى قاعدة البيانات وعرض الصورة على صفحة الويب واستدعائها من قاعدة البيانات. 


الجديد في تطبيق رفع الصور هو أننا سنستخدم الدالة الخاصة برفع الملفات وهي : 
)) | 222_«متتا' |[ طلا" 0_171»)5ع1020منا_ع 10 )ا 


الدالة ()22076_01210201601_1116 تقوم بالتأكد من صحة الملف والمحدد في (5_111,175) باستدعائها لتقوم بكتابة او نسخ الصورة إلى السرفر الذي 
فيه الموقع. وآم المتغير الأخير ( ...ين يشير إلى اسم المتغير ويحوي مكان وضع الملف في مجلد خاص داخل مجلد الموقع. 


إضافة للخاصية الجديد التي سنستخدمها في الفورم وهي : 
لط .. '"-221136 "1116"حممر) الاصسك> 


تطبيق المثال: 


0 


سنفرض أننا نريد أن نقوم بعمل قاعدة بيانات وبداخلها جدول ويحوي الجدول الذي يحوي رقم الموظف واسمه وصورته. سنقوم بعمل قاعدة بيانا 
وسنسميها ع1م وبداخلها جدول أيضا وسنسميه ح1م ايضاء وسنقوم بعمل مجلد 1228865 داخل المجلد العام 775979 وسيكون لدينا 7 صفحات 
( مطم.ثرء1؟ - مطام.200 - منام.ءرء20) وعمل كل صفحة كالتالي: 


م.1206 : وهذه الصفحة ستكون الرئيسية ونقوم بإضافة الاسم والصورة من خلالها. 
مطام.200: وهي الصفحة الخاصة بعملية الرفع وإضافة البيانات على قاعدة البيانات. 
7 صفحة عرض البيانات مع الصور. 


مجلد و1136 ايضا داخل المجلد و©1138 الاصل لكي نرفع الصور إليه. وسيكون شكل الملفات كما في الصورة : 


3 52 2 9 2 امسوم 
كع 70 طعروع5 ||| ج4 | > ١‏ كعو3ططا < العنما < ممقيط <١‏ (ن) عاوانا اهعه ا < ععغنمحممت ١ح‏ لك 249 
عام بيع لذا مانا * حاغانها ع قاذ * بصوعطنا صا عوساعمآ > ععامةو01 
ع5 م1 00110 عغ03] عحمة لا جع رميوع حو 
10107 عا ١١:0‏ ص 7١15/١2/76‏ كعوهما لال ممخاىء 0 للا 
218 +ممع5 مبزم ٠١1:00‏ م1/76-/15.” 0ه !>" كمه اصييه0 ل[ 
8 1 خمقع5 منزم ‏ 1:78 مه15/.2/7١”‏ 31 كعءقاه 6مععع لإ 
8 1 م5 منزم ‏ ااؤبارء م 7١15/١5/75‏ امك نا 7" 


قاعدة البيانات سيكون اسمها حزم بالإضافة إلى الجدول حزم وستكون كما في الصورة : 
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ذأ تعمطلمعما ع © عنم ع 94 عام 








ظ 5] استعراض | تم يتاء | (ظلم 501 | ذا إيحث | 3 إدخال | كم تصدير | + استيراد | لهي عمليات | 32 1210065 





# | الأصم توع 11010ق1ات) الخواصض حاتي إنتراضصي إضاقي الحمتية 
لا 1 ك1[ 0111 لا الاعصىء 1[العاالاع نت |ذا_0آلام #ى تخيير © سقط تن أساسي 9 فريد [5 قبرست 75 |13أم5 إ2] النص كامدة [ي] 065اله/ 0061أوأن] 
نا 2 علقم (تق2ا اعت أع_لوعمعو_قتانا لسكات "ب تغييز (ك) سقط ذا أساسي إن قريد 2 فيرست 5 |8113م5 |7 التص كامة 73 5معلااقلا 1061 أوانا 
[] 3 متمطم زنفه رعق ت_اقعحعو_قتانا 0 ىم تخييز. © سقط في أساسي 0 فريد 5 فيرست 55 |3113م5 | النص كامك [5] 85نا/ق 5111انا 


*#__ للا تحديد الكزمع المصد: 9 استعراض > ىم تغيير 9م سقط #ن أساسى ‏ © تقريد ‏ 4 قهرست 


كما في الصورة لدينا الأعمدة 10 ويعني الرقم لكل موظف وهو اتوماتيكي وهو المفتاح الرئيسي أيضا . العمود ©22:ج:,ر للأسماء . العمود 711060 وهو 
مسار أو مكان الصورة على مجلد الموقع. 


صفحة «رطام.12016:2 : 


سنقوم بعمل الكود الخاص بعملية اضافة البيانات من خلال الفورم الذي تعلمناه مسبقا بالإضافة الى الخاصية الجديد وهي خاصية المدخلات من نوع 
الملفات وسيكون الكود كما في الصورة: 


ع 0ط > 

< "2212 :1ت 1 عع 715-01 5126 2-0137 

< 1ت لاعت > 

"20531 "نمراج 212 "وطح . 508 "حيرت 1 32 03137-تطد نه 2 “,2312 1111نم" عت وري ردت الاطان 2 > 
12 >< "عنسة 12" -221112 "ماده 1" ع ع نيزنا بالادرت 21> إهسم الفوظق 
<2<2222" م بامطج” 11ت م "121127” حم ةنا نالا 21> الصورة 

<"” اضاقة "-112 151 "2 تتتتطنات " ع مم11 بانا212 1 > 

201211 “رع 

د/ ا غطهة> 

</ عطة> 

<3 /> عرض البياتات< "وطح . بورع 1" ع2 معط هوي 

عدم اعت أر > 

0315 ره 
<ت7تلمصط ار 





كما نلاحظ الصورة أعلاه صفحة 1:31 عادية داخل ال:7003 في سطر 7 عملنا ديف خاص بالفورم ليكون الفورم في وسط الصفحة بالإضافة إلى أن 
يكون المحتوى ذو اتجاه يدعم اللغة العربية أي من اليمين إلى اليسار. من سطر ٠١‏ الى سطر ؛ ١‏ عملنا فورم خاص بالبيانات التي سنرسلها إلى 
الصفحة 2010.017 »في سطر ٠١‏ قمنا بفتح الفورم ثم بدأنا بعمل الخواص للفورم بشكل عام أضفنا خاصية جديد للفورم وهي ©6م20177© ووظيفتها 
تحديد نوع البيانات المرسلة للسرفر من الفورم عبر (20051) وأعطيناها القيمة 01212-:1221111021:0/101711 وهي تستخدم حين يكون لدينا ملف لرفعه 
على السرفر. ثم قمنا بتعيين ال20)10:2 وحددنا الصفحة «را1م.2010 ثم الطريقة ال22601:00 وحددنا 20571 . 


في سطر ١١‏ حقل اضافة الاسم . في سطر ١7‏ أضفنا الخاصية الجديدة للمدخلات وهي مدخلات من نوع ملف "1976-1116 ١»‏ في سطر ١7‏ اضفنا زر 
الزدووطيره ثم أغلقنا الفورم في سطر ؛ .١‏ وسيكوم شكل الصفحة كما في الصورة: 


9 “ركع و3حم يأك هطأقءه| ذا 
م الموطف [ 


الصورة | مازع ععمورانا | ىصاع عاة دل" 
| اضاقة ] 


عرضن اليياتات 
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ساد أ0.وأمحاءعع]0©1]ص1 :اأهقمع 2 772755202 2:00967 8|115 ١/0‏ 





























١ /‏ 
صفحة م11م.2001 


وهذه الصفحة الأهم وهي التي ستقوم بعملية الإضافة والاتصال بقاعدة البيانات ورفع الصورة إلى السرفر. وسيكون الكود كما في الصورة: 


لعرااء هادا 

لزتاجمر” > 

"ثرت مسد" - عدموعده 5 
([ 'عستقد ' ] [ ' معامطح ' ] ذدظط1ظ1_؟ ) عشتقمعكهقط . اعوطدوع5 - لاعن 122 ه50 


202 قط 22511 1212522811523 «ععططه عغطع 511 5خغه5 12215 /ى/, 
[ ' عتتقه ' ] 2051 _وحعورة جك 
([ ' عتتهد ' ] [ ' مطامطح ' ] 211155 _5) حم دوه 


قطة 536 عنامت ضع طسععق صوصن “رم 
((2521عع_1وتتتس) 01 عده ("" (,"اصوص" ,"1د مط لهدعه1") ماع صصدت_لهن تمجه 
(()ع2دععع_لوقتيتهس) 032 عه ("ع1ج") طك_اعع 321 _1هن متتس 


0153535 فطاع ه65 12125221515213 فطع 5ه 1ع2 ار / 
("('ع1ص5"' ,'عشتقصة ' ) 5كالاملظل زمنمطم , عشتقص) 12ج 111120 112151:81") باعدعنات_1ني 5ه 


7 2م53 فطع م6 مواأمطم عطع عا / 

((2 52222 ,[ 'عتتقط_ججسط ' ] [ ' مطاقطح ' ] 115آ5_211) ع3_211ع1530زنا_عم امهس 11 
1 

عات 211 125 12 تنامعة 15115 ”ر/ 

",م تهت الاضاقة يتجاح" صقطعع 

م ""<<32 / »> عودة للورئيسية< 'صطم. مس1 ' 2 قعط وه" مطعع 
/ 

4 مدل1اع 

221 185 12 «طمعرعه 725 جار 

:"لم يتم رقع العلقف ..هتاك مشكلة" 0طعع 

0 

عر 
تتتقصط رجه 





كما في الصورة أعلاه في سطر ١‏ بدأنا كود البي اتش بي في سطر 4 عملنا متغير واسميناه 9621:5661 ووضعنا بداخله مسار وضع الصورة وهو 


/5ع12125 وتعني بداخل المجلد 1111285 . 
في سطر ٠١‏ قمنا بإضافة المسار الأول مع اسم قاعدة البيانات حسب الكود التالي : 
:(['0]0'[]'12112طم']كظ1طلط1"1_؟ اعتتدمع كط . أعع:21)؟ - اع :21)؟ 


المتغير 5631664 الأول اسندنا له مكان المجلد من خلال المتغير السابق الذي قبله بالإضافة إلى دالة ():75925611211 والتي تحدد نوع الملف وحددنا 
0 وهي اشارة إلى نوع الملف الذي سنرفع وهو من نوع صورة والاسم هو نفس الاسم للصورة أي يضع الصورة وبرفعها كماهي بنفس الاسم. 


في سطر ١"‏ عملية استقبال البيانات من الفورة استقبلنا الاسم في المتغير ©412912 ثم في سطر ؛ ١‏ استقبلنا الملف من نوع صورة إلى المتغير 1م48 » 
في سطر ١7‏ و8١‏ عملية اتصال بالسرفر وقاعدة البيانات. 


في سطر 7١‏ عملية إنشاء استعلام لإدخال البيانات إلى قاعدة البيانات من خلال المتغيرات التي استقبلت البيانات من الفورم. في سطر 4 ؟ قمنا بعمل 
شرط لعملية الرفع من خلا الدالة التي ذكرناها سابقا الجزء الأول من مدخلات الدالة ['111,105]'012060'[1]'6337_1322111_ة اشارة للملف او الصورة 
التي سنرفعها وعملية الرفع باسم موقت الى ان يتم الرفع ثم الجزء الثاني من الدالة وهو الهدف أو الصورة التي استقبلناها من الفورم. في حالة تنفيذ 
عملية الرفع سيتم الدخول ما بين السطور 75 و ١5‏ وهي رسالة نجاح عملية الرفع ورابط الرجوع للصفحة الرئيسية. مالم في حالة حدوث خطأ يتم 
الدخول إلى ©و1ه ويتم عمل رسالة خطا. 
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١8 
: 7161 صفحة رحام.‎ 


لعرااة سداق 
22122 :13ت ل طأاعدع 5-7"01 5126571 201137 
جع مع اعت > 
تادز > 
("ع ند" ,"", اناموع " , "5ق ظ لهعه1") عع قصمج_50113 بتسحخصمدت 5 
( () 1212115ك_ناعع نتطد 525511 11 
1 
() 1201ت_ناعع لطم _21775011 . " :طلهيا1125 مغا تاأععصصمه مغ 551120" قطعع 
0 


("1ج 12011 * مك51" رادت 5) تاعتعناكق_131وقتتم > 2ا1نادع2 5 


( (5125111) تلاقعاعطة_طععع2 _11وقيتد - تامع ؟) ع1 قطم 
1 
"0"<2 8 "لطع 71 "120 "حت ران اعمط ' . [ "معمطم ' ] تمع 5 . " “رع عوتستحعع2 5 قسدع" مطحم 
اتعطة"" وناعم 
'غتتقط ' ] تتمع 5 . " : الاسم " مطاعع 
5 22222 متاك اي لني 120 امات 
ع "التعوة"" ملاعع 


لصمع5) 15ت _11هن متتس 
جعزت بدت اه 


11 رجه 
مط ار > 





في هذه الصفحة كود عادي ومتكرر لما تعلمناه وطبقناه مسبقا الجديد فيه كيفية وطريقة إخراج الصورة من قال عدة البيانات. وهي في سطر 7١‏ قمنا 
بعمل كود إخراج وكما تلاحظ أن أي كود ,17171711 ضمن صفحة 2817 لابد أن يكون بين حاصرتين " " وأيضا في حالة كان كود ,72117411 وصادف 
أن خصائصه تتطلب حاصرتين نقوم بعمل حاصرتين متغيرتين عن الحاصرة التي بدأناها كما حددنا للطول والعرض في نهاية الجزء. وكما نلاحظ في 
الجزء الأول : 


''/5ك©5 51-1112 11115>'' 1/110 
وهذا الجزء يشير إلى مكان الصورة أو المجلد والجزء الثاني: 
['1077]'01010؟ 


ويشير لاسم الصورة التي تم رفعها للمجلد ونستدعي اسمها من قاعدة البيانات» في الجزء الأخير تم تحديد الطول والعرض لنستطيع التحكم في مقاسات 
الصور '<''710612''80 ''120''-121511 '. 


في سطر 5" نقوم بعمل سطر جديد ثم في سطر 7" إخراج الاسم ثم في سطر 38 سطر جديد بالإضافة الى خط فاصل وبعده ايضا سطر جديد في سطر 
" وسيكون شكل الصفحة بعد تعبئة البيانات كما في الصورة: 


١/08 ||: 00967 0 0‏ 
الاكدا أ0.0أم داعع0©1م1 :اأهمع ‏ 772755202 2:00967 || ١/08‏ 





١-5 


5 نف 6 7 © ا عن شق مب محاح. نياع ركع وه دم أ/أكومطاهعه! | ا خخ م 





ا 0 0 /00967 :ع |08 /ا 
ا ْ أع .0 أم حاعع] ©1010 :| ماع 52 00967 :2 ا اا ١/8‏ 





١ حكن‎ 


بما أن المواقع الالكترونية تقوم بعرض بيانات سواء كانت خاصة بمؤسسة أو مواقع اخبارية فلابد لهذه المواقع ان يكون لها صفحات تدير البيانات من 
حيث الادخال والتعديل وغيره. وبما أن هذه المهام يقوم بها مدير الموقع فقط فلا بد من حماية هذه الصفحات وتقييد الوصول إليها بحيث لا يصل اليها الا 
مدير الموقع فقط وليس أشخاص آخرين. 


في المواقع الالكترونية تم إيجاد وسائل للحماية منها طريقة ال 510551017 وترجمتها باللغة العربية ( الجلسات ) وأيضا الى نوع آخر مكمل لها وهي 
وسيلة ال 006001211755) وترجمتها الكعكات. ويفضل تسميتها كماهي باللغة الانجليزية. 


الحماية بواسطة ال [515:55101 


لحماية الصفحات التي نريدها نقوم بعمل كود ال/51755160(177 يجب تفعيل الخاصية بواسطة الكود التالي : 


الزلان[ 2 > 1 
() مأاعقعادة_ نم1 دوعو 2 
عم 3 





يتم وضع الكود في بداية الصفحة تماما وهو شرط أساسي ومعناها البدء بتفعيل 5105510011. بعد تفعيل ال/5109551007 نقوم بتعيين متغير 
ال[510551001 وسيقوم السرفر بعمل (:1 12111111 106111112211012 ©21011ن) وتعني رقم وحيد او فريد لكل مستخدم مخزنة في السرفر. ويكون ذلك 
بالكود التالي : 


: ' 5ظلا [١‏ ' عمس" ] 585510171 © 


كما في الكود أعلاه نقوم بتسمية ال/5179510(017 الخاصة بنا وهنا اسميناه »1م ثم قمنا بعمل قيمة معين وهي 571:5 في ال5175510017 ©11. وهذه 
القيمة هي التي تسمح بتصفح الصفحات المحمية. 


كما يمكننا إلغاء ال51055160(17 بواسطة الدالة ( ):5©55910122_016511:03 كما في الصورة التالية: 


: () لامعدع 025_نه 1 ددعع مكار 


0 0 00967 :ع |08 
لعلله . اة وكت زو “اإطفوة ا 0 00 1000 





تطبيق ال51:551011 


قبل البدء بالتطبيق وعمل مثال لحماية الملفات نقوم بتفعيل خاصية (ع 211112112 114م0014) في السرفر الخاص بنا ©5611 7723227 من اعدادات 
الورام كما في الصورة التالية : 


أقطم ع8 م © 





وناطعل عغمدمع؟ : (وداطء(ا)) 
؟ع1قمم5 : (وساطء(ا)) 

كعووكن! عاطممع ععالقم2 : (وسادء دا 
39 عمره وجاك لي | 29 
























لصفحة الرئيسية إدراح تخطيط الصفحة 
4 


كا عي رسج او | لم ء [آ + عطع ,>< *2 


الحافظة خط 
لآ 


هم 


١ . 5 7 5 7‏ 0 5 فو بحث 
أبجد هوز ابجد هوز أبجد هوز لكحكلبك إيربد موز 


س أساسى) أوعةق + 1١|‏ + "لكر " 
عو استبدال 


عتوان ١‏ عتوان ١‏ عتوان 7 العتوان عتوان قفرعى 





”| الانماط * | ييا تحديد " 
5 م35 1 أتماط َ تحرير 
ا لق 1110 ا اق ا 149 15 ا 161 170 ا اللا ا لاا 
ب ععم 3ق امصممء عا 1/2 ي. اا سل م- _ امارد لات رسرعليه 5-3 سريب 1 ا - ؛ راحب سس 8 كنم لحن 2 
«وأدكع:مدمم ناماه 21156 إفضل تسميتها كماهي باللغة الانجليزية. 
طكن!؟ غك أأمحما 





قا 





ععمععأع, 5كهم عجرا اا عبحرمااج 
700 غ531 

منزم عومميع يه 
5امم”ء لزةامكال 


5م مناغ روغ لامكال كيد 5510 يجب تفعيل ١‏ يه بوا عند ب 
5ع ووا كي 
: طرطط2 > |1 "”" 
5 لع أوع مع عرمووا :()ع<قع5 ره1ددوءع- | ” 
عع؟ناه5 لمعأوعمع, عرمووا 3 < ل 
كعأقع اماع77 +اممع كيو 
5 13 ”ا شرط أساسي ومعناها البدء بتفعيل [5855101. بعد تفعيل ال58551011 نقوم بتعيين متغير 
كاةطهاو 691516 (مروزعونلقمزغ+معل: عوزمى) وتعني رقم وحيد او فريد لكل مستخدم مخزنة في السرفر ويكون 


313/5 وصه| ع ؤداوع 








31077 عن]ة اع أداوع 
ال لحل د كردم م كظلا'> ['عس']52551011_؟ 
17 انا؟ كعغأ0 نان عأوقدط 
ع5 طلزك كعغأمنان عأوقمط أخاصة بنا وهنا اسميناه عم ثم قمنا بعمل قيمة معين وهي 5علا في ال/5855101 ©. وهذه 
ال عاطقهمع 
5 نامناع 11 
0دمامنا عا بي 


١1‏ ةلالا «عغالث بلط لعععيدصحمم 
ا غدهطاةء ها ها 


متحمشقزاامدام (8] لو 
لامعأل انماما 


28 


ممنكمع/ا 9 معمم] أن نواد كي 
4 1 عءناعما أنن ولاه 
٠‏ كممتدمء مك ملام ]| البذء بالطب لمَلَقَآت نقوم بتفعيل خاصية (عمناءمءع#دط غام+ده) في السرفر الخاص بنا معبدعد بردب من 

تما.مام [ا إادات الوروام 
وما ممعع منرم | | 








املق عاءزن0 كما في الصورة التالية : 
5عع الع5 اايث غهخ5 
5عع امع5 أاث ممرهخ5 
كعع ابممع5 الث غروئوع 8 


ا 01 م/|/ 


4 | * © »إلى 


2 ل 


6 | كنك العربية (اليمن) | إكاقة ها ع 


كما في الصورة أعلاه نقوم بعمل كليك بالأيسر على ايقونة السرفر اسفل الشاشة على اليمين ثم نختار 21172 - وع128)]ء5 2112 - 0110111 
15 والضغط عليها إن لم نجد علامة صح امامها. 


مثال بسيط لإيصال الفكرة: 
سنقوم بعمل مجلد اسمه :5655101 داخل مجلد 777757 وعمل صفحتين ( 12م.22162زذه - «رطم.ع1متنتنزو ) . 


في صفحة «ام.»01م512 : نقوم بعمل كود وظيفته القيام بإنشاء 5175510017 وخزن قيمة بداخلة ثم نقوم باستدعائها وإخراج القيمة . وسيكون الكود 


كما في الصورة التالية: 


ا 


ن[لادر2 > 
() 1512_5132 5ددع 5 
1785| "جرم ' | 5.5511 _5 


> 
- 
- 
[ج3 


0 ره 


[ " عط" | 55551011 _؟ "٠.‏ : 15 751112 5-5511 عتناضكة " ضصر5©!عم 
5 


للع 





في سطر ؟ تم عمل كود تفعيل ال5195510(177 من خلال الدالة ()5»551013_54214 ثم في سطر ” أسندنا قيمة داخل ال[510551001 الذي أنشأناه وهو 
© والقيمة هي 57115. في سطر ٠‏ طلبنا إخراج القيمة الموجودة في ال5105510011 ©22. هنا سيقوم بإخراج القيمة 97115. 


وسيكون التطبيق كما في الصورة : 


25 : 15 متلق )5155 تناه 1 


0 00967 :ع اا8 ١/0‏ 


.10ح حاعع]. الا لالالالا أعم.هأمطاءعع]0©1)م1 :اهمع 772755202 2:00967 08||8/ا 


























١ وت‎ 


في الصفحة 1م.5110162 سنقوم بعمل إنهاء ال[517551)0(172 الذي أنشاناه في الصفحة السابقة ونطلب إخراج القيمة هل سيتم إخراجها أم لا 
وسيكون الكود كما في الصورة: 


صيطام2 > 
() 51311 _1212ه 1ددع 5 





'غخ1' ]55:551011 _©5 ) ماع 5 تتا 

() بام2 2 دع0_لده 1 د وعد 

[ 'عظ ' ]5551011 _؟ "٠‏ : 15 1112ت* 5555111 طتناه32 " قط©طحكم 
ع2 


في سطر ؟ طلبنا تفعيل ال/5105510(17 ثم في سطر ؛ قمنا بعمل إفراغ لل/5105510(7 ©2323 الخاص بنا بواسطة دالة ()232564 في السطر ه قمنا 
بعملية إنهاء أو تدمير ال[510551001 بشكل عام. في سطر ؟ طلبنا إخراج القيمة الموجودة في ال519551)0011 ©20. وسيكون التطبيق كما في 
الصورة: 


15 لق ازل) 5 55 تلات 1 


كما في الصورة أعلاه لم يتم إخراج القيمة لأنه قد تم إفراغها وتدمير ال5105510107. 


تطبيق الحماية بواسطة 5155510017 : 


سنقوم بعمل تطبيق عملية الدخول للوحة تحكم مبسطة وتطبيق تقنية ال[5175510(1 .نقوم بعمل مجلد داخل ملف 799997 ونسميه 10111وو50 مثلا أي 
أسم للمجلد. ويحتوي الصفحات التالية: 


صفحة 1201.111 وستحوي فورم تسجيل الدخول. 

صفحة وطام.«رزع10 والتي تحوي كود التأكد من كلمة المرور وايضا بدء عملية ال5125510(017. 

صفحة «رطام.)1»12ن00 وهي الصفحة المحمية المحمي الذي لا يمكن الوصول له الا بعد التأكد كلمة المرور وبدء عملية ال510551017 . 
صفحة «طام.10801011 وهي الصفحة التي تقوم بعملية إنهاء أو إلغاء ال5175510(17. 


وكما في الصورة تظهر الملفات داخل المجلد: 


سك مي 112 ممم ع1دن] عمل" 
8 1 م5 نزام طا©طء*م 15 /بلاء١‏ 'بطاء١‏ آ تمع شع مك +" 
8 1 .قلا ااا بم عمصصعطء) عا" م 115+ 117+ ممم أ 
8 1 أملح5 منام اأعطء م ١11/١1/15‏ منوها 5 
18 1 أملح5 نزام ١-16‏ م 5 ا/باء /بذ ١١‏ هموما +7" 





١/08 ||: 00967 0 0‏ 
الاكدا أ0.0أم داعع0©1م1 :اأهمع ‏ 772755202 2:00967 || ١/08‏ 


صفحة [رد)ط.:11101 


ستقوم صفحة ال1206:2.6011 بعملية أخذ البيانات وهي اسم المستخدم وكلمة المرور بواسطة الفورم الذي وبواسطة دالة ال7051 تقوم بنقل 
البيانات إلى 2.17زع10 وسيكون الكود كما في الشكل التالي: 


2<" 25212 : 1013 امع 2-701 512571 201135 

2 قار قت > 

<81/»>تسجيل الدخول<11» 

<" 212 . 1533133 ""حتررت 1 عاعة "قوع" -050 2 112 101211 > 

اسم العستخدم 
</ ا غلتة لطعدع 115"”-51212 م "عجعج "7 حدم ورت نات 1 > 
</ر عططةه» 

كلمة المزور 
تمر "ل نوبرع عدج" ع م رمم "اعرويوع ممع" م وري نات 1 > 
</ عدطة» 

جره 

</ "اد حول "-751116 "2 تسطترى "عم جز تاجرد 21> 

20121 /ى > 

2ت قت ار > 

0117 ره 

خط ره 





كما تلاحظ الصورة أعلاه أكواد بسيطة تعلمنا مسبقا عملها » نلاحظ في سطر ؟ ١‏ استخدمنا بداية الفورة واستخدام الطريقة 700571 والأكشن حددنا لها 
الصفحة [1[م.2زع10 . في سطر؟١‏ إلى ١١‏ عملنا حقول لاسم المستخدم وكلمة المرور وتم تعيين الع«دروم للحقول ثم زر )تددطنه وأغلقنا الفورم 
في سطر .١‏ سيكون شكل الصفحة كما في الصورة التالية : 


9 امصخطئع كص" 1دمامودعء5/ كم طاقعها 
5 ب 
تسجيل الدخول 
اسم المستخدم | ظ 
كلمة المرور 


صفحة «رام.درزع10 : 


تقوم هذه الصفحة بعمل مقارنة بالبيانات التي سيتم ادخالها مع اسم المستخدم وكلمة المرور في الصفحة نفسها بإمكاننا تغييرها كما نريد بعد عملية 
المقارنة وتحقق الشرط يتم إظهار رابط للصفحة المحمية ويتم الوصول لها. في حالة عدم تحقق الشرط يتم اخراج رسالة خطأ. وسيكون الكود في 
صفحة وام.«ررزع10 كما في الصورة: 


١/08 ||: 00967 0 0‏ 
الاكدا أع0.0أم حاعع0©1م1 :اأجممع ‏ 772755202 2:00967 |8 ١/60‏ 





الزلاتر 2 > 


() 1121_5331 ددع 5 2 

5 2 

<<" 7201 لطعم 9# 1959 “روعت . 73 . امور ثر : ضرع 25-5 لهم لاطي 3 
31 112 > 5 


زمر "2-8 ع 1إحجماع وععت قلطت : انعط رععومع "عم ورم ع رمه "عون 1- ط ومع خودت" ع 1 لاوم سوعط قعاعنره» 
<25112/,» الدخول لتلصقحة<1512> 

تر > 

ع نضا > 

لإلاط 2 > 

14 ("123"ح [ "لعد نمق دهج" ] 2051 5 ع ع "2 لتقت "-7 [ "' 11522133312" ] 5_2051) 11 


5+  5:551 011] ['عتط'‎ -5- 

"تم الدخول يتجاح"قطجعع 

"2ق ”» ا لملقف المسحهى< 'تططصض . مالع تت م0 ' ت1عطط و "”مطمع 
0 


21د5لاع 

() 565121 _له 1 ددع 5 

2105" - [ ' عه" ] 011  51:551‏ >5 
:"هتاك خطأ "صطعع 





في السطر ١‏ إلى ” تم عمل الكود الخاص بال5109510(17 وتم وضعه في بداية الصفحة. في سطر ٠١‏ تم البدء بعمل الكود . في سطر ١١‏ قمنا بعمل 
الشرط الخاص بالمقارنة داخل قوس الشرط كتبنا [''5_200571]"115611322111 إذا كانت (--) وتعني تساوي "32012111" أي أننا استقبلنا العبارة 
المدخلة أو اسم المستخدم من صفحة 12016:.1011 بواسطة الدالة '20051_© للحقل عدررومر:ءون ثم بعمل المقارنة -ح ثم حددنا الاسم 201:11 
كاسم المستخدم ويمكنك تعيين الاسم كما تريد. ثم (:4:85) وتعمي (و) ثم عملنا مقارنة آأخرى للباسورد ١١17‏ الذي قمنا بتعيينه ككلمة مرور. 


في حالة تحقق الشرط وتم إدخال أسم المستخدم وكلمة المرور وكانت مساوية ل (201212-123) سيتم الدخول لما بين الفوسين !١‏ في سطر ١‏ ثم 
عمل ال5175510(17 الخاص بنا وتم تعيين الاسم 716 وتم تخزين القيمة 77105 والتي تسمح بتصفح الصفحات المحمية. في سطر ؛ ١‏ يتم عمل رسالة 
بانه تم الدخول بشكل صحيح. في سطر ١١‏ قمنا بعمل رابط للصفحة المحمية وهي 1م.0001111612:6 ٠»‏ في سطر ١5‏ أغلقنا القوس. 


في سطر ١/‏ عو[ في حالة عدم الدخول بشكل غير صحيح يتم عمل الاجراءات ما بداخل القوسين الخاصة بعو1» وهي كالتالي : في سطر 8 البدعء 
بتفعيل ال/5105510(1 بواسطة :(5»55102_512140 ثم في سطر ٠١‏ يتم خزن قيمة 710 داخل ال/517551007 وهي القيمة الخاصة بمنع التصفح 
للصفحات المحمية. ثم في سطر ١١‏ إخراج رسالة خطأ. في 7١"‏ أغلقنا الكود. 


بعد المرور بشكل صحيح وادخال اسم المستخدم وكلمة المرور الصحيحتين ستظهر الصفحة كما في الصورة : 


مام دأوه|/1مماددعة/يأومناوعه| ذا 0 ى 


ثم الدخول يتجاح الملق المحمي 


يقوم المستخدم بالضغط على الرابط (الملف المحمي) والذي يوجهنا الى الصفحة م.2111 وهي الصفحة المحمية. 
صفحة رام اداع ددنء 010 


هذه الصفحة هي مثال للصفحات المحمية داخل الموقع والتي لا يصل اليها المتصفح العادي وانما مدير الموقع او من هو مخول بذلك »ومن خلال مثالنا 
هذا وبعد ان يدخل الموقع بشكل صحيح وبعد ادخال كلمة المرور بشكل صحيح ستظهر وبعد الضغط على الرابط (الصفحة المحمية ) ستظهر كما في 
الصورة: 


١/1081: 00967 0 1‏ 
اه لفت أعم.هأملاعع]©0)م1 :اتهوسع ‏ 772755202 2:00967 |8 ١/0‏ 





مام امع ص نعهل/1مماددع5/رأدومطاوءه| ذا ا 0 1 
اليياتات المحمية 





وكود الصفحة كما في الصورة التالية : 


10ج[ 2 يه 

(51632_له 1 ددع جح 

1 (5ظلا'-! ['عط' ]558551011 _5) 12 
(" لشناط . عد 12501 : دده 1 نتهعت 1 " ) عدع معط 
0 


ا كر 85 3452-7 إرض 


2 

11001 

> 115 301 

در "2-87 1احتعه 5ع فطع :2 701طط تر رمع " جج ورمع رمه "موري 1 جلت ع صمت" جم اوم سوط اط هعاقلرة 
0د 8ط ثر »> 

راواه سداق 

<م/» الفياتات الفجمهية<صه» 

<83/>تسجيل القروح<"صصتطاح . اناموه1 "لل1عغغط وي 

يالمصط ار > 

< لقتعا رع 


2 
" 





كما نلاحظ في الصورة أعلاه في السطر ١‏ بدأنا كود بي اتش بي وفي سطر ؟ بدأنا بتفعيل ال5125510(017 .»في سطر ” قبل عرض محتوى الملف 
المحمي تم عمل هذا الشرط للتأكد من القيمة 57115 في ال512551001 ووضعنا شرط ('"14)4_5125510017]'12'11-57105 ويعني إذا كان قيمة 
ال/511551001 عمجم لا تساوي 5105 (حيث -! معناها لا تساوي) في هذه الحالة نقوم بتحول المستخدم إلى صفحة 1206:.0201 ونمنع عرض 
المحتوى نهائيا حتى يكون معاكس للشرط. في حالة كان نعم أي أنه يساوي 571:5 نقوم بالانتقال للأسطر الأخرى وهي عرض محتوى الملف. بكامله. 
نلاحظ في سطر ١١‏ رابط مكتوب فيه (تسجيل الخروج) بعد ان ينتهي المستخدم من ما يريد في الملف المحمي يقوم بإغلاق الملف بواسط الضغط على 
الرابط (تسجيل الخروج) وهنا يأتي دور صفحة [طم.011ع10 والتي تقوم بعملية إلغاء ال[51955160(1 نهائيا. 


صفحة ام.1050101 


في هذه الصفحة تتم عملية تدمير أو إنهاء ال5125510(177 والتي تسمح بتصفح الملف المحمي والفائدة هنا أنه اذا قام مدير الموقع بالدخول للوحة 
التحكم أو الصفحة المحمية وأنهى عمله عليها يقوم بتسجيل الخروج كيف لايتم الوصول للصفحة من أشخاص آخرين.ء لذلك تسجيل الخروج هي عملية 
تدمير ال5155510017 أو الجلسة. 
كود الصفحة د1[م.]105011 
تادز > 
(112_51321ه 51 دعق 
(5_5555111]'12'1) دعق تتا 


() تاه طدع0_0ه1 ددع ع 
(" لشتعاط . 1202 : ددهم 1 عتمع مت 1 "" ) عردم مدع مرا 





و 0 00967 :ع |8 ١/0‏ 
لعلله . اه وكت1 160و “اإططيوة ا 0 1 0 100000 





١ يدت‎ 


كما نلاحظ الكود أعلاه في سطر ١‏ بدأنا كود بي اتش بي ٠١‏ في سطر ؟ بدأنا بتفعيل ال[5105510(1 في سطر ؛ قمنا بعمل دالة إفراغ القيمة نهائيا من 
ال/510551001 عدم الخاصة بنا بواسطة الدالة ( ))»و2ن. في سطر ه تمنا بإنهاء أو تدمير ال51095100177 للموقع بواسطة الدالة 
(0إ0©511:0_دوزووء؟ ١‏ في سطر " يتم التحويل للصفحة الرئيسية 120©:2.1027[1 . 


ملاحظة (حاول الوصول للصفحة ام.000113624 بواسطة الرجوع لها بالرابط او الرجوع للخلف بواسطة المتفصح بعد تسجيل الخروج هنا تكمن 
أهمية ال515551017). 


الكوكيز (6001615:5) 
الكوكيز عبارة عن ملفات نصية يقوم السرفر بحفظها على جهازك عند الدخول لموقع معين ويتم التعرف على الكوكيز مرة أخرى في حالة التصفح لنفس 
الموقع وبتعرف السرفر عليك أو على جهازك من خلال الملفات التي وضعها على جهازك سابقا. 


عند تصفحك لموقع .يدعم الكوقين, ونخولك يشكل ,صحو يقوم السرش يعمل ملف كوكيز صغير.جذا لا يتجاوز_,حجمة > كيلوبايت فى .جهازك بلفر .من 
السرفر للمتصفح. عند خروجك من الموقع وعودتك مرة أخرى يقوم المتصفح التابع لك بإرسال الكوكيز للسرفر فيتعرف عليك السرفر فيتم دخولك 
للموقع مباشرة دون طلب لكلمة السر. وهذا ما نجده في المواقع الشهيرة التي نستخدمها فمثلا فيس بوك أو تويتر أو بريد الكتروني عند دخولنا للموقع 
وإغلاقه دون أن نقوم يعمل تسجيل خروج فإن علف الكيكيزة يضل.عخزن في ملفع بواسطة المتصفح بحيئا ثم الدخول مرة اخرى للموقع يتم الدخول 
مباشرة دون طلب لكلمة المرور. 


الفرق بين ال 518551011 والكوكيز 600161155 


تخزن الكوكيز في جهاز الكمبيوتر وتخزن ملفات السيشن في السرفر والأكثر استخداما هو الكوكيز ونستطيع التحكم بالوقت الخاص بالدخول للموقع من 
خلال الكوكيز خلافا للسيشن عند الدخول للموقع من خلاله ونسيان عمل تسجيل الخروج بالامكان الوصول للموقع ولو لبعد وقت طويل . بينما في 
الكوكيز يتم تعيين وقت معين للسماح بالوصول للملفات المحمية مثلا ؛ ؟" ساعة أو ؛ ساعات أو ١‏ ساعة فقط حسب نحدده نحن. 


طريقة إنشاء الكوكيز: 

طريقة إنشاء الكوكيز بسيطة جدا وهي عن طريق دالة في موجودة في ال21117 وهي دالة ( )5210200112 الوصورة العامة للكوكيز هي كالتالي : 
(101112111) ,22112 ,2011© 12111 ,213203 2مء600121]ع5 

كما نلاحظ أعلاه الصورة العامة للكوكيز حيث : 

23 : اسم ملف الكوكيز. 

1ج : وهي القيمة المخزنة للكوكيز. 

©زم12: مهلة انتهاء ملف الكوكيز. 

: وهو مسار المكان الذى سيتم ارسال الملف اليه على السيرفر. 


01 هو اسم الموقع الذي يمكن له الوصول لملف الكوكيز والتعديل عليه. 


١/08 ||: 00967 0 171100‏ 
لالتحا أ0.0أم داعع0©1م1 :اأهموع ‏ 772755202 2:00967 || ١/608‏ 





١ لت‎ 


معظم الخيارات أعلاه في إنشاء الكوكيز اختيارية وسيتم إنشاء الكوكيز والتعامل معها عن طريق بعض الخصائص المهمة والتي نحتاج لها في إنشاء 
صفحاتنا المحمية. كما ننوه إلى أهمية وضع كود الكوكيز قبل المحتوى في بداية الصفحات المحمية بنفس طريقة السيشن. 


«> - - / »+ ِ »4 
»»+ »4»)» 


كما قمنا بعمل السيشن سابقا سنقوم بعمل الكوكيز بدلا عنها وعلى نفس المثال السابق وبدلا من استخدام السيشن سنستخدم الكوكيز. وسيكون لدينا ؛ 
ملفات وهي : 

ادغط.» 2م : صفحة إدخال البيانات (كلمة المرور والمستخدم). 

مام.دزع1,.0: عملية المقارنة لكلمة المرور وعملية التصريح بعمل الكوكيز. 

مططام. ادع دسنسء120: الملف المحمي. 


مطام.)نوع1,.0 : ملف تسجيل الخروج وإنهاء الكوكيز. 


سنقوم بعمل مجلد اسمه وع000121 داخل المجلد 777777 وسنضع الصفحات المذكورة أعلاه في هذا المجلد كما في الصورة : 





كع اعاممع + بنتحصة + «حعوسرد + (ن)) عاكانا ادعها * ,ععتالاصحصصم) ع للا جيه 





]ع لعاه] علخ نا ** انلز عرهطذ * بمقعطانا صا عتساعس][ * عما مولن 


حسك مي مع ممص مدنا ةل" عماترويوع عد 
18 +مزع5 منرم ١شبص.م 515/١1/75‏ 5 ممغعاءء0 91 
8 1 .نهنا ابا لا عصصصعطى) الل ينا 00 ال هل 
8 1 أمع5 نزام اقب+دم + ١117‏ مزوما 5 ععء وا أمععع8 إك 
8 1 ع5 ززم 15 م 1+ 11 انام وه 57 


صفحة [داط. 1:01 : 
تحوي هذه الصفحة الفورم الخاص باسم المستخدم وكلمة المرور هي نفس الصفحة تماما التي تم شرحها في السيشن كما في الصورة : 


2 "ديا جا عع ته امب امخطععء لص أروءع6اممء/أدووطاوءو| 5| ١‏ © م 


تسجيل الدخول 


اسم المستخدم 
كلمة المرور 


ل | 





11 0 00967 :|81 0/ا 
كله ليقت أعم.وأمطاعع0©1]مأ :اتهمع ‏ 772755202 2:00967 8|118 ١/0‏ 

















صفحة «رام.رزع10 : 
تحوي هذه الصفحة عملية المقارنة لاسم المستخدم وكلمة المرور وهي نفس صفحة السيشن باختلاف الكوكيز فقط كما نشاهد الكود : 
1د[ > 


(235"- ["120ن51 5285" | 2051 _5 35 2 1سقة ">7 [ " 115521212183112" ] 2051 _5 ) 11 
1 


خخ 8 3-7 رك 


(لاناضة + (121710-20, " ذظة' ,"عع" ) 12ع1 صمح اه 5 
"تم الدخول يتجاح" قطعع 
""<ه8/ »> العلقء المحجهي< "قاض . عا تاعستحعمل ' -1 معو 55>" مل©!طععح 


5 
7 
58 


0 
5ع 
1 
:"هتاك خطأً"صقطعع 
0 





ع 


في سطر “" تم عمل المقارنة واستيراد البيانات من الصفحة 1216:.1:611 بواسطة دالة 720097 في حالة تم الدخول بنجاح وكانت كلمة المرور 
صحيحة يتم الدخول لما بين القوسين لل (ما بين سطر ؛ وسطر .)١‏ في سطر ٠ه‏ بدأنا باستخدام الكوكيز فبواسطة الدالة ()ع00121ع)ع قمنا بعمل 
كوكيز للمستخدم فكما نلاحظ أسمينا الكوكيز 2736 ثم عملنا له قيمة وهي 5105 ثم حدد الوقت بواسطة () 17:2 واعطينا قيمة للوقت وهي 3600 + 
وتعني "6٠٠‏ ثانية وتعني ساعة كاملة حيث ضرب ٠ ١‏ ثانية في ٠١‏ دقيقة يصبح ”5٠٠‏ ». وهكذا يتم التصريح للدخول وبالوقت المسموح. في سطر *" 
رسالة النجاح في الدخول للملف. في سطر ١‏ رابط للملف المحمي. 


في حالة عدم تطابق كلمة المرور من خلال الشرط 16 يتم الدخول إلى »19» ومابين القوسين الخاص بها ففي سطر ١١‏ تظهر رسالة الخطأ. 


صفحة «رام. ادع ترسء10) 
هذه الصفحة هي الصفحة المحمية من خلال الكوكيز وسيكون الكود الخاص بها كما في الصورة : 


مطمج» ١ ١١١‏ 
١255١4‏ -! [ 'عس' ] 15تاممح_5) + نا 3 
(" لشقعاط . 20122 1 : درت 1 طتهعت 1ل "" ) عردم م د م1 


0 





عل 

العلا او 

> 112 303< 

دمر "2-87 تنمت وعت فطع : التغط رع عمج "عت يوم ورمع "و1 - تت ود "1-27 11ان ممورطاطط قطعنده 
تدعص ار > 

مط > 

<ج/» البياتات الفمحجمية<صه» 

جق/»تسجيل الغروحع<"صطح. عددموه 1 "د1عغعط وع> 

مط رع 

1012101 ار > 


كما نلاحظ في الكود أعلاه في سطر > تم عمل شرط وهو في حالة كانت قيمة الكوكيز ليست 757115 يتم الدخول مابين القوسين لل16 ويتم التنفيذ للسطر 
" وهو تحويل المستخدم مباشرة لصفحة الدخول 1016:.1611 وعد اظهار الملفات المحمية. وفي حالة كانت القيمة 57175 يتم الاستمرار في الكود 
للصفحة وعرض ما فيها. 


في سطر ١١‏ عرض للرابط (تسجيل خروج) وهو التوجه للصفحة «[طام.1080114. 


0 0 00967 :ع |08 
لعلله . اة وكت زو “اإطفوة ا 0 00 1000 


صفحة ا م.10501014 : 


كما لاحظنا الرابط أعلاه (تسجيل الخروج) عندما يقوم المستخدم بإتمام ما يريد في الصفحة المحمية يتم الضغط على تسجيل الخروج لإنهاء الجلسة على 
الصفحة وإغلاقها يأتي هنا دور الصفحة م1250111.01 والتي تقوم بعملية إنها الوقت الخاص بتصفح الصفحة المحمية. والكود كما في الصورة: 
لزان[ 2 > 


(00ا36 - (12312020,"ذدظة' ,م "'عس" اع اعاممص اعقو 
( " للشقتعاط . 1221252 : ظات 1 متقعت 1 " ) عدم صقم 11 





عر 


كما نلاحظ الكود في سطر ؟ تم تعين قيمة الوقت الخاصة بالكوكيز وهي 3600- أي إلغاء الوقت الذي تم التصريح به مسبقا لنفس الكوكيز والقيمة التي 
أنشأناها. ويتم التوجيه مباشرة بعد تسجيل الخروج إلى صفحة البداية [12016:.211:2 حسب السطر ". 


ملاحظة : تعتبر الكوكيز والسيشن من اهم المواضيع في عالم المواقع الالكترونية والتي تعتمد عليها جميع المواقع الكبيرة» بالإضافة إلى أننا استخدمنا 
امثلة بسيطة حولهما كما ننوه إلى أن هناك طرق أكثر أمنا من الدالة '200571. سيتم استخدامها ان شاء الله في التطبيق العام والأخير في هذا الفصل. 


01117[ الجي كويري 


21127 هي عبارة عن مكتبة مجانية في الجافا سكربت مبرمجة بواسطة المبرمج جزهع:1 01[ وتحوي هذه المكتبة الكثير من الأكواد الجاهزة 
والتي تسمح لنا بإضافة تأثيرات جميلة على صفحات المواقع الالكتروني.( الجي كويري عبار عن أطواد من الجافا سكربت.) 


سنقوم هنا بالتعرف على تطبيقات الجي كويري وفائدتها على المواقع الالكترونية من حيث إضافة المؤثرات والجماليات على الموقع بالحركة والشكل 
علما ان تطبيقات الجي كويري تحتاج لشروح كثيرة حتى يتم إتقانها والاحتراف في انشاء تطبيقات متحركة ومؤثرات وهنا سنتعلم كيف نستفيد من هذه 
التطبيقات فقط وكيف نقوم بتركيبها ومن أين نحصل عليها. 


إضافة مكتبة الجي كويري 


في البداية قبل إضافة أي كود أو أي تأثيرات من الجي كويري لابد من تحميل المكتبة الخاصة بال011619( (ملف جافا سكربت) من الموقع الرسمي لها 


أو أي موقع آخر يدعمها :رمء.12417://1011©17/ كما في الصورة : 


2 27> © خ« بع لي مب لاع ناو[ 5 © 2 


1 نط لاع نات[ 01م م نا اينات عأناط201111) 115نم 


ماكو وسور8 © ./[ا 17017 531/6 ,157 عناج5 04 1 6" 


0565 +8 ,راع 5زامعط +3004 5 )165 : 
: : ,6 00 ر5وع| ع]أإلنا 
.كععء أناعل عاأطمم +50 عق 


6 101 11 11 
٠ 2 ©‏ لزاع انز عطا باط 15160 


إوعراعتك 01م منا5 870151 1115ك ناا 85108 1536101,ع0رناء ونا آطقظ 3دوارياملن 


بقم1 0[ 1030 ١انلزه‏ 0 


0ه 11.11.20 


0 10 15مأععاع 5 2553 0115ممناة 0مم020 300 لع اأأمتم 3218 بزامو0 
أنرياه كاه كنك و ات اخ ات لوكت نفتات لولاا ارات ام فت » اإعاي تاه ات إواع»ه 
14 الفاعرقة 100101 





111 0 00967 :|08 ا/ا 
كسد أ7.وأمداءعع0©1]مأ :اأهمع 2 772755202 2:00967 8|128 ١/0‏ 


١5١ 


كما في الصورة أعلاه نق م بالضغط على الزر البني الكبير (00101©19( 120751110201) “سيتم فتح صفحة آخرى كما في الصورة : 


[1121/1 


1301110ل0منا 31 ناملا ]أ (اأوناام عغأ3ىوأاا لإاعنالكز ع عكنا 3/50 ناملا 1131 10اع77177لمعع] بأو 10ت علا .1.9.0 لإاعناتز أ0 35 5ع300داء 73[01 30ل عنا اا “ا 1 لإإعنامر 11 
9 لإاعنالنز 1 300 علانات) ع20نوملا 1.9 لإاعناز عط لجع 0ع21ل0منا مععط اعلا "معناخا 1216 5أوناام عكنا 10 لع76 01 لإاعنالز أ0 510175ع/ا 9. 1-عم كالما 
111311011 7018 101 0514م وماط عموعاع] 


١10‏ لإاعنال[ تاماأع1نالم:م _لعددع]مدومء ع1 11030انثاه0 نا 
٠-10‏ لإااعنان] أناعدوامواع ناعمل _لعدمدع]مدرمعنانا عا 1)030تانثزهنا 


0 لإاعنان[ 101 ع!!آ مددت ع1 10230تانثاه نا 


065 ع5وعاع] 1.11.0 لإاعناكر 


.2 لزع 011[ 


لإامم3 علانا) ع30نوملا 1.9 لإاعنالز علا ما 5عغأ0 علطلا الط 8 07 ,7 ,6 /ع/م/مبدط أع77/ع71/ 2011لا5 701/ 0025 أناط ,. 1 لإأعنالز 35 أظطلم ع07ت5 عا 1235 .2 لإإاعلاز 
70الأاكانا 31 5اع5نا 6/7/8 عا 0 تالقااعء ع3 ناملا ك5ع]|ذانا نامأ5عا عا 1 11 و(اأكنا 110ا77177امعع] علائا بللمحتحمء لإلعناتاواع؟ اانأى عمج 6/7/8 عا ععواك العلا 5ج عرعط 
./ااالأعيوء ععامن عموعاع 2.0 عطا لدع عموواط عازه عا 





20 لااعنال] أداع درام واع/اع0 _لععهعع] مترامعنانا ع1 30ه1تانثاهنا 


0 لإاعناك[ 101 ع!1] مودت عا 20ماداثثلاهنا 
5 ع35عاع] 2.1.0 لإاعنالىر 





نضغط على الرابط الأول في 2.2 006377 . بعد الضغط على الرابط (2.1.0 0011617[ 21:001161052 ,15560 7إحددمه عط 0دملستمط) 
نشل |! 7 التالية : 


- ص 2 © ا خن له م؟ ل2.1.0.1-::1/ه.معدوزءهه» ذا 2 جح ©» 


هه 
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بعد ظهور الصورة أعلاه وهو في الاصل الملف الذي نريد تحميله نقوم بعملية حفظ الملف من خلال الضغط على حفظ باسم من خلال المتصفح كما في 
الصورة : 
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ستظهر كما في النافذة التالية : 


سس 


م " [اعناوز ع روعذ - لالعنلوز < اللملما < محصعويد ١‏ (ن) عاوا0 اهءعما ١‏ عشمموع ١‏ لأ © | 


لد 5 
© 12 ع0اه؟ معلا > ععاموو:01 


ع5 م1 0011 ع03] عصمة لا 1 
ممغادء0 1 
000/15 -1 


كعء وام غمععع8 3 


ملاعزوع؟ انامز لاع قط كصمعغ] ولك 


كع أمقرطنا 
معنا 00 ]| 
ع أكناأ/اا الى 
5ع ]نا 1م إضاأ 
دمع ٠/10‏ كر 


منمروع مرولا ركو 


عأناموره © الللار 
(©) عادزه ادها وك 
(:0) عصساه لا معلا وى 
(ع) عحدساملا معلا ىع 
(©) عحدسامل/ا معلا ىع 
عممطه د أعدداهنز اثلكا 


عار باع لا ب 


9 .1.0 2-/وعداوز بعدمهم عاط 


7 00 ععاناه5 غملءءذ5هماو[ | عمط 35 ع10و5 
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أنشأنا مجلد في 6011117 وأسميناه 1117 لوضع المكتبة الخاصة بال0111-7 فيه كما في الصورة أعلاه نضغط على حفظ (527) سيظهر داخل المجلد 
كما في الصورة : 


م /راعناوز طعروء5 |)]| ع4 | > لاأعناوز < القالمها < ومحصويب <١‏ (ن)) عاوانا اهعما <١‏ عع غنمصصمه ١‏ شل 
© 18 -م2دق8 عل اه؟ بمع لا ص8 * حاغانها عرقطة * نووعطنا ماع نساعمآ > ععاموو:0 
ع5 ع1 001110 عغ03] 1 عصمةلا 00 
8 82 عا غأمقع5 أملع5ل ‏ +مبق٠*‏ م١2/7١/15١7‏ مح 0 معناو[ >" ممخاىء 0 لاا 
00/0 -7 


كعع واه غمعععء8 21 


نقوم الان بالدخول لأحد المواقع الداعمة لتطبيقات الجي كويري ومن خلالها نتعرف على تطبيقات بدائية ونقوم بتحميلها لمجلد 1617و[ والموقع هو 
على الرابط : 352:/[0]1©17/1011©15061205.5126201 2.21/2 نالصا 05 :555.1 //: اط 


ملاحظة : في الأمثلة التالية سيتم التطرق لبعض الخصائص للتطبيقات وسيتم ارفاق جميل الملفات مع الكتاب. 
مثال :١‏ 
سنقوم بتحميل التطبيقات على المجلد وسنمر على بعض التطبيقات لنتعلم كيفية تركيبها وتشغيلها على مواقنا والتطبيق الأول هو كما في الصورة : 


2 اصصغط. ممق جاع ناه[ ضصطصكرم حمق سمي اا 1 


بعد 





١/08 ||: 00967 0 11111 
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في التطبيق أعلاه مثال بسيط ولكن من خلاله يمكننا عمل شيء مميز في موقعنا وفكرته في عرض وإخفاء الديف الذي يحمل النص مع اللون البرتقالي 
الغامق يقوم بإخفائه بشكل حركي جميل وكذلك العرض في هذا المثال قمنا بتحميله من موقعه الاصل ثم غيرنا بدل الجمل الانجليزي جمل خاصة بنا 
باللغة العربية ايضا ترجمنا النصوص الخاصة بالأزرار وغيرنا حسب متطلباتنا ورغبتنا والكود الخاص بالمثال كما في الصورة: 
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دائما عندما نقوم بعمل اضافة تأثير جي كويري أو سلايدات أو أي تطبيق فأنه غالبا يتكون من ثلاثة اشياء رئيسية وهي : 


روابط الملفات أو المكتبات الخاصة بالتأثيرات والجي كويري وخاصة الجي كويري لابد من وجودة وأحيانا يتم اضافة ملفات أخرى بجانبه خاصة 
بتأثيرات معينة وكما في المثال السابق في سطر سته ربطنا ملف المكتبة الذي حملناه بالصفحة وعملية الربط هنا شبيهة بالربط مع ملف 0255 . 


الدوال الخاصة بالتأثيرات وهي نفسها من تتحكم بالتأثيرات وتنتجها ومن خلالها نستطيع التحكم بالتأثيرات من خلال الوقت والطريقة وغيرها وفي 
المثال من سطر ٠١‏ إلى ”7” هذه هي الدوال والدوال جمع دالة والدالة هي (:011221011]) كما تلاحظ الاسم في الاسطر المذكورة ونأخذ من المثال الدالة 
الثانية من سطر 79 إلى "١‏ لاحظ طريقة تعريف الدوال في الجي كويري مختلف عن البي اتش بي كما نلاحظ الاسم المعن للدالة (#59120371) الذي بعد 
علامة هاش (#) اسم للدالة اذا اردنا ان نستخدم الدالة من أي ديف نقوم باستدعائها بواسطة هذا الاسم كما في السطر ؟١‏ تم استدعائها من خلال (10) 
كما تلاحظ وكتبنا اسمها لذلك عند الضغط على الزر الذي يستدعي هذه الدالة تقوم الدالة بعملها او وظيفتها وهي عملية العرض. ومثلها الدالة الاخرى 
عند استدعائها والضغط على الزر الذي يستدعيها تقوم بوظيفتها وعملية الاخفاء. 


نلاحظ أيضا وظيفة الدالة في سطر ٠١‏ من خلال )0( مسمناعصط؟)كاءعنك".) وتعني أن الدالة تعمل بالنقرة (ك111»)» في سطر "١‏ حددنا (موم؟ة) ويعني 
هنا أن التأثير الخاص بها سيكون تطبيقه على ال(2هم5) ايضا ((512059)2000.) وهنا كلمة 5100177 تعني عرض والقيمة ٠٠٠١‏ هي مقدار الوقت 
لتنفيذ الوظيفة و١٠٠٠‏ تعني ”ثواني وبإمكانك التحكم بها تغييرها حيث ٠٠٠٠‏ تعني وخمس ثواني وهكذا. 


المكون الأخير وهي العناصر المطبق عليها التأثير والتي تستدعي الدوال أيضا وهي كما في الأسطر ١١‏ إلى ١9‏ قمنا بعمل (59021) متعدد والفكرة من 
التعدد هنا عمل الحركات على كل (579211) كلا على حده. 


١/1081: 00967 0 1‏ 
اه لفت أعم.هأملاعع]0©1)م1 :اتهومسع ‏ 772755202 2:00967 |8 ١/0‏ 





مثال ؟: 


إضافة (220001:01012) من احد الاضافات التي تضاف الى المواقع وهي كما في الصورة (بعد تعديله بالعربية والاتجاه من اليمين الى ايسار وتغيير 
النصوص) : 


نف ا 7 690 ا + # ؟ .5 جز حرق / لاع ناو [/لالام ا لان/رح اق انار / زعا 5 08 جه ©» 








حنوان 3 .0 


عنوان 4 يو 


كما تلاحظ الصورة أحد التطبيقات للجي كويري والكود الخاص به كما في الصورة: 


< 120 > 
دمر "8غ ب 1وحعع وتعتقطت ‏ :2 امعط “ورمع "مايرم تومه "ا عورن 1 ات ع صمت" جم 1 اوم سوعط مطعاعمدة» 
جد ر"وون يرومع "مراع اعم طوت انا ع" لمع "تج . 217-111 6 ناق و ثرت ققط “رة عنتقطاء 87 ١‏ 1 ناك مدع نان 135,73 “رعمة زت “بقادج . 0553123235 . عقت ذه ثر ر : ووطعط" عد معط 1 11> 
<22 21ج ص “ر "5 1131.3 . اعت عاق و “رك . 1 “اناق 3“ 135 “رقت ز3 ققدت . 555931232135 . عقق ثقق “ر ثر : موععط"”ججمع هم عواعحج 5ه 
<2 1 علج 5 “ر 5" 5 10131 1انا 15ت ناو 3“ - 1 “نان 3ق ناق 3 “,1325 “رعقة 33 ابتتتدج . 555931232135 . عقة ثقق “ر ثر : وعطعط"”عجمع 5 طواعج 5ه 


0 
اعد 
5 
3 
و 
1 


<121ع2ج5 > 
+ ()11ت3طاعتتمع ) تلعج . (عمعستد مك ) 5 
( أ ننه 1 تطمع ع3 . ز"ده 1لعمعع 5 4" ) 5 
11 
<126عع 5 /ر > 
مآ ار > 
<" :528 ضرق : 52 51- نارن 5235715-72 مألم وداه 


<<" 2251 :2822121513 3131 : تعانتق 1 : 123133قلة ‏ :عتزنا ناك : طع 5115-1 "نت 1تعمععق "10-7 2017 
خط رده ”,> عتوان 1<" #"د1قغط وعدقطله» 
<201> 

جوه 
عستا تص ...هقا تقتص 
لك 
01357 ار > 
<3طرعدة/» عتوان 522" #"اج7ععط وعدقطه» 
< 2-201 
دمة> 
عقا قص ...عقا قصأ 
در > 
01 ار > 
<23رعدة/» عتوان 3<" #"ل27ععط وعدقطه» 
<01-> 
جنه 

ستقا تص ...هقا تصص 

درك 





فى سطر 7-5 تم اضافة المكتبة واستدعائها من الموقع الذى قام بعمل التطبيق كما نلاحظ الرابط لموقع جوجل قسم الأجاكس. يمكننا الذهاب للرابط واخذ 
في َ لام - تيم 
الملفات التي تم ربطها ووضعها في مجلدنا وهو الأفضل. وكما يظهر أمامنا الدالة في سطر ٠١‏ الى ؟١.‏ 


0 00967 :ع اا8 ١/0‏ 
اتاو »وات 00 6زوا الضيوة 2 /0096 :2 ع اا8 0لا 


ع .0 م طاععغ]. ثانالا نالا 














..مثال لتطبيق سلايدر 





كما في الصورة أعلاه ولعلك قد شاهدة ما يشبه هذا التطبيق في مواقع كثيرة ويسمى (511161) يقوم بالتعامل مع الصورة وعرضها كشرائح هنا مثال 
بسيط وهناك تطبيقات أكثر جمالا من التطبيق أعلاه واكثر جاذبية واحترافية ايضا. والكود الخاص به كما في الصورة: 


<11ارعدر 
<11 رعدر 
<11 عدر 
<11ارعدر 
<11 رعدر 


در "18-85 71احتع م 25ت تناح : 201 ا رع تمع "حر ورت رمه "امورياتع نع ومع 5-7 11اوه سورع طلا 53 108> 
<1212عج 5 ,22 5[ . 12ل . لا . 1 . دياع ماي و"عمع 5 17ج 21ت قتتمة ز رععرمع "احم وريتع ماعن 5 > 

<< ج1اعع ف “رع5" 8 و . 7 . 75119321 :قمع "”عوع ده "1167نت قتتمة زو رععرمع "حم وريان ‏ ماعن 5ه 
"1212 5 تكق و رمع "حم ورين اأوم1اعع 5 > 

! ( 201321111 ) ادمع . (عتدعستع مت ) 5 

1 5751121هت ., 

م 12120 

115115 1 ألمت 


د/ر "ورم معرمع "قم ممم "دمت رعبرمع "اعمورياه "ان مفرطوت تع ع "تمع "قروم , زم معرمع “رموه 2-7 صعرظ 11 13> 


بن سه نذا 
"" بيات 1 تمعن 
بن ب سه مدا 
"" بيات 1 تم عكر 
ا س .مهدا 


5201215125 1 
122121315 
131-25 11ت 1 
11ت 1 
11ت 1 


8312-22-58 
2-255 1ه 
0ج ويه 15د 
8512-2-3 
8312-5 


"2ل 
"2ل 
"2ل 
"2ل 
"2ل 


م 21201 
ع2 ا 


د1ط/رة».. فقال 


. 231 قناق ز ”,2525م 1 ""حم جرع 
. 7 2 تاق ز “,25525 د ""حمعرع 
. 73 2 ناك و “,723525 1 "حم جرع 
. 4 ةماق ز ”,25و23 1 "حم رع 
. 2375 ناه 3 ”,151525 "عم عرع 


("عع4513" )5 
: معاتتك 


21 1732 
11 
1 
دع واعع ود رع 


نات 
< 2ه[ / > | انيم 
<57 0ط > رركم 
2_3 
"51121212 امج "10-7 031ه حرم 
حار 
"عع 55" -11 01> 26 
لتطبيق سلايدر 11> الورك 
17 ره 28 
عدب 
<"2ع 10-7511031 20337 لا 
531 
<111ةه 32 
112-217 > 5 
112-212 2 358 
101 2-2 11 2 ا 
101 11-2 2 5 
11 11-2 2 ا 
111 ”> 0 
1357 كر > 137 ره 





دبتقصط ره 


كما نلحظ الكود أعلاه في الدالة والتي تقوم بعملية تحريك الصور وكما ترى الخصائص الخاصة بها وهي 0و تعني أن تقوم الدالة بتحريك الصور 
بشكل اتوماتيكي في حالة أعطيتها القيمة 2016 وتعني نعم أو صح . في الخاصية الأخرى 35 وتعني الاستمرارية حتى لو تم تحريك جميع 
الصور والوصول للبداية مرة أخرى يتم الاستمرار في حالة تم اعطاء القيمة 6 وعكسها ع1 . الخاصية الأخيرة هي ©11 11111116 وتعني عددية او 


رقمية كما نلاحظ الارقام في صورة المثال. 


ع .0 م طاععغ]. ثانالا نالا 


0 00967 :ع اا8 ١/0‏ 





اتوك 11611 الصسفوة 


2 /00967 :2 ع اا8 ١/0‏ 





مثال ؛ : 


اممخط عع كم01/1//1 الاك 1ك / لطاع داو ز/ الامو /حرحمع تمان/ عا نا | © 





ل ل 00 


ممع ع اا 





من خلال التطبيق أعلاه نشاهد احد الامثلة الجميلة للجي كويري ودورها في إعطاء الموقع منظر جميل ومؤثرات جاذبة للمتصفحين ومن خلال المثال 
أعلاه سنقوم بتركيبه في التطبيق النهائي للباب الخاص بال7118 . يتكون المثال السابق من الملفات التالية (كما في الصورة): 





/أا0 /اباع هناد طعروع5 [] ع > | > ١‏ الاملالاعلتاد <١‏ بمعنوز <١‏ سععص ١‏ موس ١‏ (ع)عادز0 امعما ١‏ عأنمممك ١‏ ال 
09 ال[ | + 122 1ع 10مغ بع لذا انا * طاغانها عرقطد * نضوعطنا صا عساعم1آ > عداموو01 
52 عمينا1 700110 ع:03] عومقلا 5-2 كك 35 
عام عا :7.15/07 1ل لال ممغاىء 0 لاا 
5010 عا االبطء*م ٠١11/1‏ تعمتومع لال 5م اويوه0 لل 
38 .20 11لا عمممعطع . الأب م 12/./7.؟ »عم © كعءةا8 أمععع إ 








يحتوي المجلد الأول على الصور الكبيرة والصغيرة للسلايدشو ويحوي المجلد الثاني على ملفات الجي كويري وملفات الو اما الملف 07[1غط.:12016 
فهو الملف الرئيس الذي فيه التطبيق وسيكون الكود الخاص به بعد بعض التعديلات كما في الصورة: 


<<" 701تطلع 19997 روعده . 83 . ووو ثر ثر : ووعاطط" -25 لهم لسعاطيع 
30 115 > 
11> سلايد شو<1518ه 
دم "2-8 1احتعم وععت متكت : لتلتعاط رومع "7ع مورت رمت ""مورياع - ط لت روح "1-7 نان مسورطغط مع مده 
<ت/ 5517 تامعتمج اده نات 3 ,51313125567 مضع غنات 3 ,513322 "عط ورم ع ومع " م لعرم بوي معز "7 -112ت 1 مع مره 
دمر "مومح . 2221752115 قوم "2-7 صعرط "دوج عبرم اعم وراط اعم م رطمم اتعو "رمع 1111 > 
+5 اعم م ع" 1ق 773 2321ل قلع "اعمعرم ‏ ان 1عتت متمق ز ار جرمع "عم وريتج ‏ 6م 1عن 5ه 
ءارا 
<<" 207737 : عتم لامع - لتنامع وعاع مط" -5 121 5 تتقصط» 


كن 02 


1 ذا 0 


<< 123111211ل1مج -12 11316 5 نم-1 20115 

<2111< " 159325 5_1" - 5 15ت 01> 

<11 ,><" 51_0نه"-103 "برحيا يكم قي دورة المواقع الالكتروتية"-21212 "عتوان 21-1 287[ . تتتتلتتك تأعاتقة 5 تاعدتات “رقع وهقطة 05217 ""جمع 5 ودردع < 11> 
<1_1”/<2113وتته”-10 ""عتوان 2"-51516 "عتوان 2"-12 "350 . امع دعل رقع وهسة لمعه "#جمع 5 مسدهع < 13> 

<11 ,><" 1_2ودنههه”-10 "عتوان 3"-51818 "عتوان 3"-211 "3290 . مدع وقة ع لاط /, قعوهسة /1هعهق "؟حمع 5 يودع < 11> 

<11/ر»</,"1_3دههدمه”->10 "عنتوان 4"-81815 "عتوان 4"-518 "3590. 117215ع ز “رق ع وهسة /, لمعه "”عجعع 5ه وسدع-< 13> 

<11 “>< ,"1_4وهدمهه”"-10 "عتوان 5"-8125185 "عتوان 2125-5 "20 . 111325 “رقع وهسة “ل لدعهة"”حمع 5 وسدهع< 13> 

1ل ”رع 11 ”> 


لعف 9« سق 


2 آخر خم كن كي كن آخن كن كن كن كين لت 


< 22031" 1215 1ناطظ_كد" - 5 135 20117 

<ت “> 1< ,"20 نز . لتتتلتة احا قة 5 اتات “, 255115325 / 05231 "52 12134 عد" عتوان صغير"-231218 "#4" 2 معط وي 
دق “> 2< / "و35 . ععدع3ع0 “183235 1م25 / 521 "ج52 12129 هعد" عتوان صغير"-231218 "#4"د2 همعط ويع 

< قت “رع 3< /, 237[ . 35ع قة 1ق #, 255115325 ,0351 "احعع2 5 1203 <<" عتوا ان صغبير"-21218 "#4" 2 همعط وي 


جة “> 4< /," وجز . 35211312131 ,725511513125 831 "52 1203 2<" عتوان صغير"-21615 "#4" 22م عط وي 


ةق “5< 207[ 21111235 ,25511325 ,5681 "ج52 مسد ع <” عتوان صغير"-231218 "#"ج 2م عط وي 
31 ثر ةج 3ل ره 


كر 8 42 رك ارس 8د 


8 


<131 عه " لام مقطادع_دو" حق هه 1ت 2-001 
3 “ره 
<< تامع شه “رهت" ص ن . 7701451313122 221 يموده "عجمعرع ‏ "7 12ن1ع2ت كد عة و رمع "اعدمورياع امومع 5 > 
<تاماعع ص “ر 2" 5 و . 211 5“ 221 دوه "عتمعرع ‏ "أن 1عدج كد مه ز رومع "اعم ورياع امومع د > 
تتتقصط ره 
01 1 “> 


0 
1 سدس 


0 





شن 020 


0 


0 00967 :ع اا8 0لا 
او و1111 الصسفوة 0 0 0 1000010 


أع طا. 0 أم طاعع]. /انانانا نالا 











١ 6/ 


كما نلاحظ الصورة : من سطر"-7 ربط الصفحة بملفات الوو© والجي كويري بالإضافة للأسطر ١‏ ”. من سطر ١١‏ إلى سطر ١١‏ خاص بالصور 
الكبيرة للسلايدشو. من سطر ٠١‏ إلى ١5‏ خاص بالصور الرمزية الصغيرة . سطر ١‏ خاص بالظل الذي تحت السلايدشو. 


القوالب الجاهزة 


يمكن لأي مصمم مواقع الكترونية الأن أن يستفيد من عالم الإنترنت وعالم تصميم المواقع الالكترونية فقد سهلت الكثير من المهام امام مصممي المواقع 
الالكترونية نظرا للانفتاح الكبير بين المبرمجين والمصممين في عالم الانترنت وتبادل الخبرات والتجارب في مجال تصاميم المواقع في هذا الجزء 
سنتعرف على أشياء جميلة ومساعدة سهلت لكثير ممن لا يجدون في أنفسهم الإبداع في شكل المواقع الالكترونية أن يستفيدوا منها وهي القوالب 
الجاهزة للمواقع الالكترونية . 


ماهي القوالب الجاهزة: 


عبارة عن تصاميم ويب جاهزة من حيث الهيكل الخارجي والتصميم الشكلي للمواقع مصممة بأحدث التقنيات المستخدمة في تصميم المواقع مثل ( 055 
501121 4 ادل > 701111195 - 1113113 ,211311 -20593 - ). ويمكن لأي متخصص في عالم الويب ان يستفيد منها ويقوم بتعديل ما 
يلزم وتركيب قاعدة البيانات الخاصة بالموقع. 


كثير من القوالب تكون مجانية ولكنها في الغالب تحوي حقوق للمصمم سواء عدم التجارة بالقالب او حذف رابط المصمم او الشركة المصممة ولكن 
هناك ما هو مفتوح ايضا وبإمكانك عمل ما تريد. في المقابل ايضا هناك قوالب مدفوعة أي عليك القيام بشرائها لتستطيع التعديل عليها كما تريد ونقل 
الحقوق للملكية لك كمصمم. 


يمكن إيجاد القوالب بالبحث عنها في محرك البحث جوجل ب (61217121665©) 776151012 ©4©6). صور لبعض القوالب الجاهزة : 


!]|20 2206071627 زه دام 


3019ع١]‏ داع لا 2 1 2 : 2019ع١!‏ دبلا 


010جع2 5رتاع لا 


7012 |1111“ 








١/1081: 00967 0 1‏ 
اه لفت أعم.هأملاعع]©0)م1 :اتهوسع ‏ 772755202 2:00967 |8 ١/0‏ 


001 و0ا8 طم[ 50115 5أععزمرم 9 ار ا 5 27 


ل ا ال رن 


ا لا ائ ةا 


مده ١‏ وام شاءعتوة 


© كعاباها/ا دالا 8090١‏ | 


252828 01016 





2010 - لاماد06 حح# 01 1 5 امم 
113 7310115 أ لع 5 5أنال مزمعرم 1 أعوع أعزل)ع م107 بأأأء ذ5ناةأ 5أنام أ 511 1وامل ناكم عه ا 
5اع1 3 ع3 077000ح ألم 580 011103 5أناق اناك 1اأم؟ 00 01 ]اول مراع 15م301 الاأعاءع درمء 
- : 1 #اتمغخطاء»ك ل0ى 1 / لوال /نزوال ناا ! امم ادع دااع اذا صمعجحع ل/ارو]ء ولا /ن) لعا 
مرصحم تخامآ ١ج‏ معمصم للامانا <١‏ : : 


: 0 00967 :ع اا8 0لا 
ع .0 م طاععغ]. ثانالا نالا 


تلرفااة روعت 1ت اسليا للعيية 2 /00967 :2 ع اا8 ١/0‏ 





تطبيق عام 


2110 يي 255 > 710111:15 > 111311 » 3115501 


١/08 ||: 00967 0 0‏ 
الاكدا أع0.0أم حاعع0©1م1 :اأجممع ‏ 772755202 2:00967 |8 ١/60‏ 








نطبيق عام حول 21127 عى  ).55‏ .111111 عي 117501 


سيكون هذا التطبيق عبارة عن خلاصة ما تم تعلمه في الفصول السابقة والتعرف على اضافات أخرى ودائما قبل البدء بالمشروع لابد من تحديد ما هو 
المطلوب منا وماذا نريد بالضبط ونقصد بهذا علميا قبل الشروع بالعمل لابد من جود تحليل عام لما نريد عمله ونحدد كيف سيكون الموقع الالكتروني 
وماذا يتطلب وماهي الخطوات الأولية وهكذا حتى يتم العمل بشكل واضح ودون الوقوع في أخطأ او التعديلات المتكررة وضوح الفكرة والعمل أهم عامل 
في بناء المواقع الالكترونية. 


فكرة عامة حول التطبيق 


سنقوم بإنشاء موقع إلكتروني لرواد التكنولوجيا وللخدمات التي تقدمها “موقع لمؤسسة متخصصة في إنشاء المواقع الالكتروني وسيحوي الموقع على 
خدمات الموقع وأقسام الخدمات. لذا سنقوم بعمل جدول متطلبات ومحتويات الموقع. 


يتم تصميم ” صور رئيسية لعارض الصور (51106519077) حسب مقاسات التطبيق 
0 المستخدم 
يتكون الموقع من " اقسام للموقع 
(قسم المواقع والاستضافة - قسم تصميم جرافيكس - 
قسم الصيانة والشبكات ) 


ل 


جدول خاص بكل قسم في قاعدة البيانات 


تتكون القائمة من الاتي ( الرئيسية - خدماتنا - من 
أعمالنا - من نحن اتصل بنا ) 


0 00967 :ع اا8 0لا 
التوة لوات 11611 الصسفوة 00 0000 


اتوك لوكت 10 





صفحتين لترويسة الموقع والجزء السفلي من الموقع 


ع .0 م طاععغ]. ثانالا نالا 





١ا/١‎ 


مرطام.ءجع101 


سيتم تسمية الصفحتين لاحقا بالإضافة إلى تضمين الصفحتين بواسطة 
()12110 وهذا هو السبب لعمل الصفحتين كي لا نقوم بتكرار التصميم في 


كل صفحة ويتم الاستدعاء فقط بالدالة 12211106 وكيف يسهل التعديل مستقبلا. 


مجلد يحوي صفحات مدير الموقع ويحوي كلا من : 
صفحات إدارة الأقسام وتعديلها. 
صفحات إدارة القائمة وتعديلها. 
صفحات إدارة المدراء وتعديله. 


0 00967 :ع اا8 ١/0‏ 


تلوف »لوكت ليا الطيية 2 00967 :2 اا ١/08‏ 





المرحلة الأولى (التصميم) 


خطوات التطبيق : 
نقوم بعمل مجلد للتطبيق وتسميه 1004م ضمن المجلد العام 783883. 


نقوم بعمل ؛ مجلدات بداية ضمن المجلد الخاص بالمشروع وهن ( 12دمآ)2 - 1222865 - 99©) حيث أن 200111 مجلد صفحات مدير الموقع و 
65 للصورة المستخدمة في تصميم الموقع و 5و0 لملفات أو ملف السي اس اس وسيكون شكل المجلد 010604 كما في الصورة: 


52 م1 700110 عغ03] ةل" 
لا 
؟عام؟ عاط 5 م ااا/رل١‏ /5 ١١1‏ ماحصلة نل | 
؟عام؟ عاآ 17 م ١١11/١‏ 5و5 لل 
عام عا + 5٠م 715/١‏ كعوقما لال 


نقوم بعمل صفحة رئيسية [طام.:©10 ضمن المجلد 1001م . وصفحة وو56916.0 ضمن مجلد و. 
نقوم بتجهيز خلفية مقاس (الطول -١1٠١‏ العرض )١ 1٠٠١‏ ونضعها في مجلد و6ع11212. 
نقوم بعمل الخلفية للصفحة 17م.<:1706 وسيكون الكود كما في الصورة: 


صفحة «رطام.12016:2 : 


<" 05 . 153-0121321 1-13231215 222101 / 10110 / 2211011 / 11 / 01 . 173. 7761م / / : عط" "11ظ / 132515102317 0 . 1 +3<21111 111 / / 1130 / /-" 211811 لسعط 2061221 ؛ > : 
<" قط ع / 1999 / ع0 . 173 . 7 / / : مرج 6ط"-201215 21> | ذ# 

<520ع2> 3 

</ "2-8 باتنع 25 قط :25101 رع عدعج "6-2 م مه "527 21ت 5ض هن "-01115 م طاطغ 11653> 2 
<21526625>/21516 0105917 خطءع17 [ الرواد لتكتولوجيا المعلومات<*212812>|) 5 

</ "دقن عجعج "عم ورياع "عع فم زوع 1رتع 2861-5 "5ق وج . 561715 “رقدء "-2ععط 1ص 11> | 52 

<مدعط “ر> 3 [ 

<00157ط> 8 

9 
<0017ط/ > | وه 

<25181/ر > | اناه 





صفحة و.»5)71 : 





"-2ع1" عوقع ترح 4 
* 7622نا 106 055 * 


20174 
: 41560 : 2 111220-51 م22 ع1 قط 
: 6 2011210-17 ع1 3ط 
( : (329. وط/ 1212653 / . . ) 1121 


قمنا بإدراج خلفية جاهزة باسم عمز.ع[ سيكون شكل الصفحة كما في الصورة : 


: 0 00967 :ع اا8 0لا 
ع .0 م طاععغ]. ثانالا نالا 


اتلوافا» لوكت 1ت علو للصيية 2 2:00967 اناا 








١/1 


3 نف 1 7 © خا د خضي © /امعزه:م/دمطاهءها 3] | 2 ج مه 





نقوم بتقسيم الصفحة الرئيسية إلى عدة ديفات أو حسب الحاجة ونقوم بتحديد اطرافها وعمل لون مؤقت والديفات كالتالي : 
الديف العام والذي سيحوي جميع الديفات الأخرى وسنسميه 22122 والكلاس الخاص به في ملف 5916.055 بنفس الاسم. 
ديف رأس الموقع وسيحوي الشعار واسمه 1620612 والكلاس الخاص به بنفس الاسم ايضا. 

ديف القائمة وسيكون »22 والكلاس ايضا بنفس الاسم. 

ديف الخاص بالسلايد شو وسنسميه 511016 أو حسب التطبيق الذي سنضيفه من سلايدشو جاهز. 

ديف خاص بمحتوى الموقع )122ع]0011. 

ديف بالجزء السفلي للموقع 750)]01:1. 

ديف خاص بالفوتير أو تذييل الموقع »15001 وسيكون خارج الديف العام. 


بعد القيام بهذا الخطوات سيكون شكل الكود في مطم.ع0 نز كما في الصورة: 





11111 0 00967 :|08 /ا 
امه أع0.0أمحاعع0©1م1 :اتهومصع ‏ 772755202 2:00967 5 اا8 0لا 





0232 . 3251123151131 ع -1-1عا 1ع “10110 7 01-1ع طلم “ا 1 أرق حتت . 73 . امم ثر أر : وزع عا" "لظ / “125131515151317 ذا 1 22221111 1011“ عات نام “ر-" 112ظلا2 لققعط 20001321[ ١‏ > 1 
<<" 1تتط تعد 1999 “وعدت . 73 . ووو ثر : مورطغط"-25 لتم لقتعاطاع 2 

<20 12> ع 

دم "2-8 6 1احتئاع وعتقطت ‏ : 1201 رع عجعج "حم رمع رمه "عجري 1- جه خندم" -7 1 لاوم ورعاغط 08> 3 
1261112 /ر »2152225 5937 1مصطعع1 [ الروات لتكتولوجيا المعلومات<خع51851> 5 

دمر "دون رعاجرمج اعموياع "امم راوع 1ع قو "تامع "دوج مع1ياتطه ردوح 72-7 مع 111 > | 3 

ءا تا مارا 7 

دتتقصط» 8 

<-حهتا يداية الديق العام --!1- 0 ا 
518112" -5 15ت 20315 1 
11 


<-ح-هتا بداية ترويسك الفعوقع--!+» 12 
<03 ,> رأس الموقع<"2دع مد عغط"-1355ه 03ج ا 0 


135 
12-- هتا يدا ايك القائهسة--1> 15 
<015> هستا القائهك<"ناتاعم"-12355هء 01> | 12 
<--هتا تهاية القائهة-!ب»ب 17 
<-- 125233113323131 الامطعع5113--١1‏ هج 1 
<01/> هستا سلايد شو<"51313038"-12355ه +2013 لاقت 
<--5101 51310312 0 -- ابي 21 
واحدت نك أيك قحتوى الموقع حح ا جه رت 
<015”/,»>محتوى الموقع< "اطع عغصمع "1355-7 01> كك 
خ-- تبهاية محتوى المسوقع لآ عار 
8 
<--يداية القوتبير--!>| هم 
<83315/»#تدذيبيل الموقع<"تدع26مهم2"-13355ت +31 | دنه 
<--تهاية القوتبير --!>| أكثت 
لاق 
312 ير ع 1 الات 
<--ت باتك الديقف العام --!» 4 
دتقمط ب ع | رت 
<لل7ط رع ا اناك 
٠ ٠ ٠ 5‏ 5 
وسيكون الكود في ملف 5716.095 كما في الصورة : 
112124 . 


: 2150 : طو دعظ 
:5 : 7106 
31502 0: 115220412 


60624 . 
:م1 5051134 4217515 : ععملعمط 
: 31150 : عطو 163 
:0 : ط6 7710 
: 26 :5152012 
1 


92 


2116121 . 
:5 4222 551134 :عع عمط 
: 31150 : طون دعظ 
:5 :77106 
:31150 :21522012 


ذا رآخر 4١‏ 5-23 زف 


زف كك 


5131016 . 
:5 50114 #2815 :ب ععلعمط 
: 31150 : عطو دعظ 
:02 : طع 7710 
20 25212:0 


كا [ث) [ظ) آخر إخم| (إكرا إكث) آخرا إكرا إثرا 001 


© 08 5 


١ "5 53 


00215621 . 
:5 551134 #715 : ععوعمط 
: 31150 : طاطو د16 
:96022 : 7106 
:3116 521522012:0 


51 


ذني 
رخرا 00 ك5 ليف 


1 © 
لزه |“ 


0 81 


2624 2. 
:5 551134 #425715 : ععلعمط 
2150 : عطو1دع1ظ 
:5 :7106 
: 3150 :21522012 


0 





: 0 00967 :ع اا08/ا 
ع .0 م طاععغ]. ثانالا نالا 





اتلك ت 160و اإطووة ا 0 0 10000 


وستكومن النتيجة كالتالي : 


- تك 5 7 © «خ«* ين خير أدب باععزه:م/أومطاقها 5 © ب 


0 5 < 
وس سوم 
هنا القائمة 

كن 
هلا سالك سنو 

10" 5.1 5 
محنوى الموقح 


000 
1 11 
0 7 


نقوم بالعمل على ترويسة الموقع 1862067 ونبدأ بتصميم شعار الموقع وسيكون المقاس (الطول ١١١‏ بكسل والعرض 774 بكسل) أو حسب الرغبة 
ونضعها في مجلد الصور. سنقوم بعمل كلاس للصورة أو الشعار 112281080. لكي نستطيع التحكم بالشعار. وسيكون الكود في «[م.<:1216 كالتالي: 


لقلا فنك لا لز 58 قثتتها لفق كلض 


"2م م5"-1255ه ‏ 03> 
</,ر "1355-2135 "وتم . موه 1 “ردعع نم1 "حمعع 5 110103 > 
<01/ > 





وتم اضافة خاصية (112110) وتم تحديد القيمة 1:1 للديف 18220161 كي تكون الصورة او الشعار في الجهة اليمنى. وسيكون الكود في وو50916.0 
كما في الصورة: 


21 : كات 1طأععع 03 

2 551133 2288 2 : عرم عمط 
1126 : عأاتات 1ت ا 
:711111 

16ت :133133 قل 





أع .0 أم طاععغ. /انانانا نالا 


وسيكون شكل الموقع كما في الصورة : 


> ها نف + 7 © ل« + أ ؟ 


06 


بامعزهم/أودطاةءه! 5 | لع اج » 





ننتقل الان للقائمة وكتابة العناصر فيها وعمل كلاس خاص بها وبعناصر القائمة بكاملها وسيكون الكود في 0ط12)6©:.[1 كما في الصورة : 


وسيكون الكود في ملف الوو56716.0 كما في الصورة : 


ع .0 م طاععغ]. ثانالا نالا 


ف 
1 


<--هتا بداية القائهة--!» 

20115 155 5- "51111 "<< 

2111 

11 “,>< ق / »> الرئيسية <<" ترناح . مدعنم 1 "امعط 25 13> 

11 لرعدقة ر»#عطدمات تا 475" ع2 مصعم وهعة 13> 
13 رعتة/»من أععالتاةت"#"2ععط 525 11> 
<11 رعهدة »من تحجتت" 4" 2 وععط وهع< 13> 
<3227/11/,> اتصل يبتاج"#" ل معط وع2 11> 

111 ,رةه 
031 > 
سم 0 تهاية القائهسعة--!> 


3-3 إءدس| إس ذا سود 


1 


ارس 


ا طم اطع اطع إظم) أطخ أظم إطع سنن 


ره |3 





8325335 : 5212 111512-52 111 1تد1 12 . 
نا : 20311 قلط 
122 : نزت2 -120111 قل 
تنا 1 : اللان عا عامط - 2 1ن 2 هدر 
213131 : 31ت12-1 
282لا ك : 1ق 3131-11 1 قسر 


شع اطثر 25 26 
12 ا 


فح[ ث8 2 


ذا لي 


0 
111 111 1تشضر عه . 
153133312 : 43521537 
33 : 11ت 1121 
عرة عزنا عدر عدننا : 1120ل مهم 
# :عم1ادع 
: لانانا نانا م1 نم3 عنم1 م1 : ترم شطع -طعجردع 
تنا 7" : قاع كت 1ج 


نيا 
00 وض 


5 258 7 
رع هد 


ذا كر 


ييا 
|| («1 7د ل 


51 11 111 نقتت . 
: 24221 :عملامع 
1ضظ : 1ق 1ه5ه-112ت12 
118513152 :13ت عأ قعاوح ه015 جه 
42595454 ذا عنمن1 عندم1 : جرم شطع -ععردع 
2225115 : لام دعا دعرمع م0- جيجه 
عرة عدزنا عدرة عدتننا : 39 1م مهم 
2333 م1 نم1 : تتم شطع - نامع 
: 12 : 12-0115-5122 
ْ 


121 :3 1131 111 تتقد ,عع *صظ :3 11 111 1ن 12 .ء 
عترة عزنا م3 عتزنا : 20 دم مهم 
:2121112 
3ر8 عتزنا عترة عتدنا : 115 1مسع-عرم عوط 
218 # بعمل1ادع 
: 22910 عتم1 :م1 : تتامنمقطة- عجرمع 
د 





0 00967 :ع اا8 ١/0‏ 





أع .و أم حاعع]©0]طأ :تجلاع 2 00967 :2 ااا ١/08‏ 








وستكون شكل القائمة كما في الصورة التالية : 


- نف 1 7 02 خخ« ل 4ه ع؟ راعع زهاميأووطاةهءه! ذا © جه ©» 
000 


إعيلك 6 له ذا الهاا لكا 


79 , 20-0 
2010114-01 


أل مفسيفة ةذ مائتا 1١77‏ النا وتاقكة تين 81 
الرئيسيه سسا أكسا سسا © ٠‏ عضصمهما سيت ير" ستل ا 0ك سدم 
00 > 37 
هنا ساديد سبى 
محتوق الموقع 
يدنك[ : الم 3 
تَذيِيل لموقع 


سنقوم بإضافة كودين " اكواد جديدة للكلاس الخاص بالقائمة وهما كما في الصورة : 


م1 #288787 نع عمل : ورمع عع عمط 
2 488787 لع عامل : مع عامط عع لوعروطظط 
52 : 2519 101513311 

1151 311 : 

771211: 2 





كما نلاحظ تم حذف ال:زع7601:01 السابق وثم اضافة الرع101:1 لأعلى وأسفل كما في السطرين 4 "؟ وه" وجذف ايضا الكود السابق 00 واضافة 
درزع:31 من أعلى كما نلاحظ الكود أعلاه » وبعد الانتهاء من الترويسة وما فيها من الشعار وايضا القائمة نقوم بحذف البوردر 701067 الخاص 
بال:126206 من ملف و29 والموجود في سطر ١7‏ وسيكون شكل الموقع كما في الصورة : 


هنا سيد نبو 
محتوى الموقع 
تدييز المى قع 


نقوم بتركيب سلايد شو وهو موجود لدي مسبقا وهو كما في الصورة: 


ب 





توف وت 10 























١ 


من خلال الضورة علا ستقوم يعون السا يشو شمن الموق الخاص ينا سنقوم بحلاف الديف الخاض الول زع ولكى قوع ينقل التطبيق يكافله تحر صن 
على نفل الملفات الخاصة به وملفاته كما في الصورة : 


0 11 > -دق تععادة علخ حلا * للغايهر عرهاك لارقوطنا م 
حسكت مم1 لمع ممص عؤونا رول" 
ع عام عاط انم ابطء /1 1 03631 لكل 
له عاط ظ1:١١‏ ص لاأأابا١‏ 'بذا١؟‏ لعملوموع للن 
48 1 ...هلا الاب [ ذا عفصصوط) ‏ ( 1١:1‏ صي لأأبا+ بذا١؟‏ يتك [عرا_ع صق جد 
كه ...هنا لأا 1 ل عمط 1١:5‏ صي لاأأ/را+ بذا١؟‏ عع مم 2 


سنقوم بنقل جميع الملفات أعلاه إلى مجلد )017060 باستثناء :1206 فقط سنقوم بنسخ الكود الذي نريده من داخله وسيكون شكل المجلد بعد النقل كما 
في الصورة : 


م عزممم مهد ||[ ++ | + < تعزمم <١‏ صعب ١ح‏ مصعم ١‏ (ع)عاكته اما ١ح‏ عسمصمك م بزل أدري اق 

© لذ » دق تعلعادة سملا مس8 ** غابص عرقطة * مقطا ما علتساعم]آ * عتاصمو0 
م5 1 لمع ممصم عؤون] 1 عحمملك"ا 2 عت عد 

؟ععامة عاط 1-5 م لااباء اا تالحماعة. أن ممععاىء 0 ا 

معام عاط 76ئم م لالارط» /115 عى للا ممه امهم لل 

عام عاط جضت م لااااء ب1ا١‏ ا 01 للك 5عع3اه تمععع 8 525 

1ع عام] عاط 1 م + /ب1 ١١‏ لعماومع 1 

؟ععامة عاط > انل م لااباء ب1ا١؟‏ لخر للك 181315 | 

118 قتا انا !!!ا مصصط؟  ١1١:95‏ صيى لاأرا١‏ /11ا١‏ ا عل مزع دروم 6 كمع اناع هنا 

28 تماع5 ملام القن م لاب +7157 ا 7 عأعداا/1 ألى 


سنقوم بفتح ملف 12016:.120111 لنسخ الكود منه إلى الصفحة م1206©:.011 كما في الصورة : 





كا وق <"2422222 : 0102 -20ناه 2و1 23ط"- 32171 تتقمط> 
ريات ]82 2< اء زة هه ]10 < ارد م فيليا ء!< يدك 
كاعععم 5 5:0 حي ءا 05 ان يانم إن 


حاتت 0ح نياف ا نيناءاء ون ها يكم و 026 01 3 الت 1ك يريا اش بالا اك سيقت سر زع ]ءات انما ٠6‏ 16 ا يمت إ6نة. 
5 ايح 2 سس 5|104 805-٠6‏ - 0-17 هه د- 
بيزء ٠‏ رص -؟- تن 6اء ( 112/ 025531 " جنع 5 ١‏ 
"عقوان 4"-5216 ”"320. 11771213355ع 3 / 835و قتة / 251عن "مجعو 
"->2 31 "326 . 2111325 / 65 172036 / 0535231 " ج5712 1110 


إزق 


زف |" 


اق 


1 
1 
ل : 
اق 
2 
2 


ان بيرق 


عن (ه علس شدطاة. 
1700 ><" ع1 
1<" ع 

ا 2 <يياكدا 
6< احيلاد 


2 
6 


أ ند ةا مدا 


-_ 6 
0 “مم اقم ,قبح ,قم لسع 


11 

احم 

يحت 
,_- 
,- 
6 


ذا ندا 
| دا 
“5 قم قبسم قم قم فم 
ل 107 10 


<0357 //ر >< "5150017 





أخكز 4 521 زف (زف |03 


إخرا اكز اكز اكز إكنا 


: 0 00967 :ع اا08/ا 
ع .0 م طاععغ]. ثانالا نالا 





اتلك ت 160و اإطووة ا 0 0 10000 


١.726 


تم نسخ الكود أعلاه وايضا السكربتات المرتبطة واللينكات للملفات الخارجية وهي المهمة. وسيتم النسخ إلى داخل ال 1106و كما في الصورة : 


ينا 
5 


<< -- 11233137113 وقظ #نامطع 1313035 5--1 > 
"5112" -5 دقم1ات 203 
<< 5111211 امع -2 1315 1ق تنهه7"” ->01 1 203177 
2111 "قمع وهسة_ د" - 5 2135 201317 
<51_0"/<»/131ته"-10 "برحيا يكم قي دورة السواقع الالكتروتية"-512812 "عتوان 3155-1 "123 . نتتتلتع طاعاقةق تاعتطاكت “رقع وهسة / 1هع هق "حعع د وسد ع 13> 
<113/,ه<,”1_1قتده”-10 "عتوان 2"-81218 "عتوان 2"-512 "و15 . عع دع رقع وهسة / 1 دهن "احمعع2 د وسدع + 13> 
<1_2",/<27/11قتته”->10 "عتوان 3"-51518 "عتوان 3"-312 "389 . قوع ولقة ع لآ طرق ع وهسة / 1دعهة ""حعع2 د يسدع + 13> 
<1_3",/<2/11وتته"-10 "عتوان 4"-125غ212 "عتوان 4"-512 "117:21515.355ع 3 رقع وهسة / دعقت "احععد وسدع< 13> 
<11“,ر»</,"1_4نهه"->10 "عتوان 5"-581815 "عتوان 5"-3118 ”3150 . 113125اط “رقع وقهسة /المعمة"حعع2 5 ودع 11> 
< 031 2 11ا “ره 


م 2 2 28 25 
0 ذم ذه 03 


ا 
ف (-5! سس 


نا كبر كبر 


1 
42 


2201" 1215 1ناط_ ع" - 5 35 1ه 20117 3 
قت “1< “/, ”20 نز - اتتتقلقة عا قت 5 نا تقلت “, 15325 1دمع ,3221 "ج52 ود ع5" عتوان صقغير"-51212 "#"-2م عط وج ل تنك 
قت “رع 2< ث/ " 20[ . اعده دع0 /, 25 5111تط /, 7"03231 ج512 1113 ع5" عتوان صقغير"-5112 "#"-< 7ع ع و ٠|‏ كان 
<< “3< ”,0ج 3 5203235 تيا “ 011125هط ,085221" ج52 نسدد <<" عتور ان صقغير"-51212 "#4" 1ع عر وه | رتك 
تة ,4< ,”قن . 2111215 ”,2155 1صمع ,52531 "”عجعع2 53 وسدع5" عتو ان صقغير"-51812 "#4" 2ع عط وج ل[ ريك 
2ق “رع 5< ”1207 . 111325 ” 511325ه6 /, 05681"” ج52 11213 هد" عتوان صقغير"-21212 "#"ج17ععط وي 
01 كر 01 ره 
<1ن رهج "تم مقطاع_مجو" حه قم 1ع 2017 
1و ر» 
31 ره 
<--51651 511342 1-80 





وايضا قمنا بنسخ اللينكات والسكربتات الخاصة بالسلايشو في المكان الصحيح ما بين كود ال1080 قمنا بنسخ الرابط لملف الجي كويري فقط 
والسكربتات الأخرى في ال70013 كما في الصورتين: 


211550 < 

</ر "2-8 بج عع وعتقطعء ‏ : لتتعط رع ورمع "عم ورت ع نمه "مورب1- طوة ع ود" 0 1 نام سوعط قتعا قنته» 

<11112/ر 21532225 ناوه 1مصسطعع1 [ الروادت لتكتولوجيا المعلومات<ه5112> 

دم "وو ريرم موري "مم وده 1ق "رفع "دوع , اناق ردوح 2-7 مع 1111 > 

حد/ "5ع . 1221752112 وده "2-7 معط "دوع رع عدج اعتموريتن ‏ امم رطمم 1-7"5211[1ه8م2 1 11> 
دمتعم ص “57 م ناق 3“ 931221زه "اعممععم ‏ "زان 1ن7ص قتعة و اراجرمع "اعم وريتن زان 21ج 5 > 
ده ري 





<--تهاية الديق العاسم--!*» 

<< جطر1عع ص “رعت" ص و . 70751313512 12217و دع "جمعرع ‏ "عاج 21ت 5م تمه و ارعاعرم "حم ورياع جلاعن 5 > 
تع ج1وعحع ص “ر 2" 35 . 122121 22175 قم "اعمعرم ‏ "عو 1عت قعمممة ز ارعاجرمع "اعم ورياع أوراعحع ده 

تتقمطا ار > 

< معط ثري 


لق 
اشن 20 


للع 


5 
6 


ذش 0 


رع 
لقا 





لإعماماع ال ل ٠‏ 0005 
اتلك ت 160و اإطووة 2 00967 :2 ع اا8 لا 


ع .0 م طاععغ]. ثانالا نالا 





وسيكون شكل التطبيق بعد نقله كما في الصورة: 


- نف 15 7 © «« ب هه م؟ #م اماع 0م عع زهنم/يأوهطاوءه٠١‏ 35 | 26 ع 
29 اد 2ه 7 1 
22 قر ١‏ 


إل دق ىه 1-7 اونا 7 4 ا 27 0" ) 
الل اح د زمر ' لفسا مضت زِير" سال ا 00 ندم 





محتوى الموقع 


تذبيل الموقع 


نقوم بإزالة الخطوط البيضاء من الديف 511016 بحذف ال:و»1701:16 من ملف الوو© وسيكون شكل الموقع كما في الصورة : 


7ت يها نض ا 7 © « ين 2 مب #مامءعع لماع زمنم/أومطاووه| ذا © >« 


ل الك 00 
هم ) ( 





محتوى الموقع 


و و 
لدبين لموقع 





سنقوم بعمل إضافات جديدة على الموقع وهي عمل خلفية بيضاء شفافة للديف 2210 والخلفية نقوم بعملها في الفوتوشوب أو من أي مكان وحسب 
الرغبة وعمل ظل للديف العام . أما الصورة فهي كما نشاهد : 


ع ا" اسنلاي إم لكات ساسم 


- الرديار ونح اء ف 2-0 أهحعهل؟ 


ا م له ”ىنج 8 بجعم 


لب نعي 


ل[ 0" 
لا 


أع .0 أم طاععغ. /انانانا نالا 


0 ععلإقا 











كما في الصورة أعلاه نقوم بحفظ الصورة ونسميها عدرم.2ع7 ونقوم بإضافة الكود في وو5)71».0 للديف 21م الخاص بالخلفية وسيكون الكود كما 
في الصورة : 


112111 . 
ع عآقات : عاتن 1121 
عتطنا5 9 : طعت 71 
111 :131313 قن 
: (2113 . قوط / 1202325 / . . ) 111:1 : 2 وقد تستامع و عا قط 
+ :عتم" '- : درمج -:121 115131 





تم اضافة الكود في سطر ١7‏ وسيكون شكل الموقع كما في الصورة: 


7د 
05 


كح ص ظ 
ويك الشكايةيعدى حل 


»-1)»2 21“ 8 


الرئيسيه 


مرحبا بكم في دورة المواقع الالكترونية 


محتوى الموقع 
تذييل الموقع 





نفوم بعمل ضل للديف »2 هناك بعض المواقع المساعدة تصميم وان شاء الاكواد بشكل يدي كما في الموقع : 
(:51:201077-:5511121.©0122/1207. 2001110777777 


وهو كما في الصورة ادناه من خلال الازرار في اليسار نتحكم بالظل للديف على اليمين وينتج لك الكود الذي يقوم بذلك وننسخ الكود الى داخل الديف 
(الكلاس الخاص به): 


موف لوكت 10 








© |5010 


81 سي |2 قلنا //01 مم5 8601 
*0 | 4 عا اتأممع 0ن 
1 
باذ أوقع ا التعناع/ا 
ألاء 1 لإم00 

لام 23015 اناا8 

1 م28 عام / غام3- ://ز60-517300- اطع /را- 

]063)0,0,0,0.75(: 

(1053)0,0,0,0.75 م1 2م28 عام 7 “ام 3- :/102-0017-51730018- : 

:(19063)0,0,0,0-75 م1 2م28 غام/ غم 3- :507-513001/0 م 0115 50620 


م 0101© 51300108 


80 2010 


00101 





أع5] ع0 ااأنا0 


وسيكو الكود كما في الصورة 


11ت : تطق 1م55 

:طع 71 

8عآقات 1 : 11و22 هلهس 

2113 . قط / 17129325 ث” . . ) 111:1 : 113335 - مستامع وعاع مط 

2 - : 1221-11-21 قن 

(75 '. لاء,لا,لاء لا ) قطوع م1 2م28 عتم عددرة- ‏ : الاممقطع-غعصط- ع 3ع[ نامع 
(75'.لأامنا مر لا, لا ) قطوع عم1 عو 2 عدم”م عررة- : ام مقطد عمط ومس 

(75 . لام نا رلآ, لا) قطوع عم1 عموم8 2 ععدمم عدررة- ‏ : واممقطد - عمط 





وسيكون شكل الموقع كما في الصورة: 


- فنه ططة 72 [#مما 222 9 9 /اعع زهنم//أومطاوها ذا | © هه 


أع .0 أم حاعع]. انانانا نالا 

















١ 


ننتقل للديف 26ع201 والخاص بالمحتوى , من خلال القوالب التي نستفيد منها في اجزاء المواقع لدينا قالب مميز سنستفيد من بعض أجزاءه وهو كما 
في الصورة : 


نا غللا اللا 


1م 273003 ع1مأهل غعع30! أنا غانالا1] 77100 5اناع تأطات /[00تنناله2 قال لع5 بألاع وراء5ام301 اعتباأعاعع 05م بأ300 غأ5 61ا0ل توناذما جمعرما 
0 3ع لاع مانالاأة انا اكات 60115ه0! أاماعذناك 1عم307201أأنا 3101 أعرعلاع 705100 5انان ,3107الاع/ا 07لالت5 30 تقامع اوانلا ألا غأ2مأناامنا جرع 





0031 60115 
/اا/ !اذ ذا الالاذدط!| الااغ08 | /1 !اذ ذا الالاذدط!| الااعغ01 | /الاظك“1اد ذا الالاذكظ| الااغ018 | /ااك“ اد ذا الالاذدط!| الااغ01 | /1ا !اذ ذا |لالاذدط!| الااع01 | 
بأ غ51 00101 تاناكما (اع1ه0 ا ,أ3 غ51 101أ0ل ١انا5م!‏ ع0 ا ,أ301 ]51 00101 ١1اناكم!‏ 7ماع01 ا بأ2 ]51 00101 تاناكم! 7اع01 ا بأ3 غ51 00101 تاناكما 7اع01 ا 
0 580 بألاع وتاء51ام301 اللأعاعع 5م 0 0ع5 بأتاع وراء وام 301 ؟لاأعاعع05م 0 0ع5 بألاع وراء51ام301 ؟لاأعاعع05م 0 580 باذاع وراء51ام301 اللأعاعع 15م 0 580 بتاع وداء1ؤوام301 الاأعاعع75مء 
أنا 1101010116 ممتمع] 100 5نااع أنا 1101010116 1ممتمع] 700 5نااع أنا 1101010111 ؟ممتمع] 700 5نااع أنا 1101010116 ممتمع] 0100 5نااع أنا ١101010116‏ ممتمع] 100 5نااع 
3 77303 00101 اع عمجا 13 77303 ع101مل أع عمجا 3 773003 0101ل أع عرمطحجا 383 77303 001018 أع عمجا .31101013 57530113 عامل أع عمجا 


سنأخذ الجزء الأول (790 157117 '79111) : والطريقة هي أن نقوم بنقل الديف كامل لهذه الجزئية وهي كما في الصورة: 


>2 سس ست ست ج2016 لدم تسمه © 
<"7 1355-5232 01> 


<" "1355-7 01> 
<" 0256125-20 5-7 1335 01> 
احية (زماء زه زه يليا الت ضعت 
لح ى ا هاء - ]ا ءا < ارك 
اه 6ك 


دره ا لزعاى ل لهره!-!! بياث بتاءاناء ا ضهاء لضي |6 أءان 5< 2ك ا.920(0ظءث: الزن اناءزساءظ لظي اف حت #-ظطالنت رإو6اء«لهه|-اطءولظءا- سات ل يم -اوزسى لان لظ وزء ا لزعاءد (010(-29802 النإودزه7 ل ظه فك 
تك 4< 9ط 1< سا ال-اط,ءر 5< هزءاء(ه!! بظاعءوهي|-ا لنت ودنماءوزهها0099001-1 اوزه ا < اس احمء نوات اناه« اهاء( للطننةى 10105 7اطونتن: انطو ظ غ7 ا6أ- أنفطءت #«-اضب زف دنرت يد بن 101 ان 810 
هف لعاانه-اءرمات 
ولذوءموك 
<"112 9220 02 1355-5621 0157> 





من خلاص الصفحة الخاصة بالقالب نقو م بنسخ المضلل عليه ونضعه في الديف 11 للصفحة مرطم.د11101 الخاصة بعملنا كما في الصورة: 


<-- بيداية محتوى الموقع --!» لك 

< قت مألامع "5-7 1855 2035 58 

<"عووط-وروع "5-7 135 20139 035 

<دغخط/»ماتقوم بة روات التكتولوجيا غ2ط» 
<211 كر 

تعد 1 

موقع إلكتروتي متخصص في تكتولوجيا المعلومات ويقدم خدمة تصهميم واستضافة المواقع الالكتروتية والتسويق الالكتروتي 3 
مواقع : رسهية - إخيارية - تجارية - تعليهمية -قواعد يياتات)|١(‏ 
! عالآتات شولك : قيص يبوك - حوحل - تشروانف الكتروتية زسفية جار" 
جطر»> 1 

03 ار هه 7 


<031 ,> 
2-- تبهاية محتوى الموقع اج 





لاحظ الكلاس الموجود في سطر 55 الخاص بالنصوص إما أن نقوم بتتبع وجود الكلاس في ملفات الووح الخاصة بالقالب ونقوم بنقله لملف 
الووع.ء1جو الخاص بنا أو نقوم بنقل الملف إلى المجلد ووح ونعدل مسار الرابط الخاص به. هنا نحن قمنا بحذف جميع الاكواد الخاص به ماعد الكلاس 
الذي نحتاجه ونقلناه مع المجلد كما في الصورة : 


0 00967 :ع اا8 ١/0‏ 
اتاو »وات 00 6زوا الضيوة 2 /0096 :2 ع اا8 0لا 


ع .0 م طاععغ]. ثانالا نالا 





سج ات هج - - # أ 


521 متمطد رهط . 


فم يم 


2231221 :5133131- 22ت 0 3 
: 42125121 :عم1امع 4 
353 :2552 101112-53 5 
: " 11131اوع2ه2:2112_ققطعط " :117 نقهسة 121-11 6 
2ن 2 : لققتمع عاصط-2 1ن 12 قلط 1" 
0 
1 عط 


551313 عدم1 :تمع عامط-عم عوط 
235312 ت ورمع عع عمط 

نا :1219112 

معت نا نا5 :1311 

:1311322-12 :337 1ج5 903 

 - 1 52‏ : نرنع -0111 12 قل 

2 1 :تامع ا حط-2 5121 

ات :13113-231315قنة 
12111-15111110 قلط 


إل«مط- وم . 
51ج : 5131333 - مات 0 
: 2 :الام عا عمط -2 201 قل 
/ 
4ج عمط وروت . 
:22521 :عم1م5ع 
8125520 . ا : 22 101311-53 
2 5 . 1 : 11315-15233115 
55 :13265 
13قتقت لا :151311 





والطريقة الأسهل هي نقل الكود السابق إلى الوو50916.0 . وسيكون شكل الموقع بعد تحويل النص إلى العربي كما في الصورة : 


> نف ا 7 0 خخ عد 4ه ؟ مامءاع لص اراعء زمنم/أووطاقو|ا 5 0 جه ©» 


هه 


١/08 |ا‎ 2: 00967 00 
١/608|| 2:00967 772755202  عموهأا: أعم.وأمطاعع]0©1]صأ‎ 


ع .0 م طاععغ]. ثانالا نالا 








١/مه‎ 


نقوم بإضافة أخرى أيضا وهي للأقسام أو الخدمات الثلاث التي تقدمها رواد التكنولوجيا وسنستفيد أيضا من أحد القوالب وهي الجزء الموجود في 
الصورة : 





510ل[ شاناكءاناع/ا زمه كاناكطا| الجاع« ملءع1ط 1ل اناوع لما دنا لرملل] عن 1 


سنقوم بنسخ الكود الخاص بالتطبيق أعلاه مع توابعه من ملفات وو والكود الخاص به كما في الصورة : 


سنقوم بنسخ الأكواد أعلاه وننقلها للصفحة [1م.<:106 الخاصة بنا تحت الديف الخاص ب(ما تقوم به رواد التكنولوجيا) كما في الصورة : 


11111 0 00967 :|08 ا/ا 
الا كسا أ0.وأمحاءعع]0]0©1ص1 :اتأهمع ‏ 772755202 2:00967 8|115 0/ا 





١/مك‎ 


- مواقع : رسمية - إخبارية - تجارية - تعليمية -قواعد يياتات| ين 
إعلاتات ممولة : قيس يوك - جوجل - تشرات الكتروتية رسمية | كعك 

64 >/2< 

<015 / > حك 

656 

<-- الحرّء الثاتي من المحتوى --!> الك 


<"01210_35"-1355ه 017> 
<30131226>/22 ناخ 025626 53123236253 0401052 ه151 02©71-آ< 22> 
<" 1355-9210 01> 
<"ة2 1355-3311 01> 
< 3 / >< " 11135-12237112 " -5 51 231 "24 نز . 345-370134 01:1 / 17013253 “رطع 1"-2 535 3710 >< "207 . 4 :012105-37 / 170253 “رطم "2-2 معط ع> 
<0157 ار > 
<260116>/23 تناع 2مطع عطءع<3ط> 
<"م_1210و"-1355ه 017> 
235 5اع 206 238 141151412 . 2136231 3 62053 11121415 501115235 12 .61312 301313120 افا 025656 3133652 5315 0401052 12513124 2<1-02610> 
<2// > . 5312225 301323531267 40152 61 162115 115 12026 .11070 2262201262235 1143734 313 ,ناع 2‏ 202 
<3 />ع2 10 0<" 2111 . 832115ع0"-12ع220 "2غط_121ني 592 مط غ2ناط"-5 135 35> 
<01 / > 
<015 > 
<"921 ”1355-7 01> 
<"”237 1355-0311 03> 
<2 / ><" 5-2370 5-1712 631151 "31297 . 5 6223145-31 / 65 12026 /رطء 52-1 1706 ><3297 . 91305-13170765 / 5 12036 /رطء 7" -#عطط 23> 
<3ك > 
<223/>تتتنا 1325 26201262235 نا <23> 
<"م_210و"-12355ه 017> 
25 2061115 2318 211159116 . 21367231 3 6205 11115115 5011152315 12 . 6131© 30313120 1432 025656 31336121 53115 040102 1251114 2<1-012611> 
<2/ > . 5312225 3013235312670 40102 561 162115 115 12026 .1170 226220126235 3131143734 ,ناع 2‏ 2م20 
<3 />ع2 10 0<" 2111 . 22212-08531153 "2طط_ 3121 291 ص«2مع طناط"-1355ه 35> 
<01 /ر> 
<017 / > 
<"1355-9213 3 1355-7921 01> 
< "نجع 1355-0511 03> 
<2 / >< " 05-1237206 5-1112 163111 "31297 . 45-317366 6231 / 17202665 /رطء"-572 172016 ><7 329 . 045-317195 613 / 5 12020 /رطء 7" -#ععط 32> 
<01 > 
< <311550>/23 57631113 12مع23<22> 


ززه إزه ك0 
١©( 8 1[‏ (] 


ا 
لع إكن 


4 17 4 إزه 


ل 


5 
5 


8 
8 


.| 80 80 80 1 
له > ك 71 175 2 


8 
ززق 


انق 
ل- 


زف :8 18 (18 (158 150 10 





نقوم الان بربط الموقع الخاص بنا بملفات التنسيق سواء الووه والجي كويري ونقل الملفات او المجلدات المتطلبة والمجلد المرتبط بهذا اسمه ٠1‏ 
وتم اضافته للمجلد الخاص التطبيق وفيه جميع الملفات وسنقوم بالتخلص من جميع الملفات ماعدا المرتبطة بالجزء الذي نريده وسنقوم بنسخ الروابط 
كما في الصورة التالية : 

</ "311"-560133 "دوجن /رععروج "عوج "ععع لوع 281-751 فاوووي عوواج وار وو رسيم 00 كم حأ ظ 


<30 هص ار > 
<017ه0ط> 





نلاحظ في سطر عشرة واين مساء الملف المطلوب ونحن مخيرين إما ان نقوم بنسخ الكلاسات التي تتحكم بالجزء الذي نسخناه ونضعه في ملف 
5 او ننقل المجلد كاملا كما في الصورة : 


١‏ طعي <١‏ ععزميم < معي <١‏ وموس ١‏ (ع) عاكته امعما ع ععشمممك ١م‏ لل | نم 


الا يي 


ععادة مدعل" انا * اغايها عرهلاذ ** 17قمطازا صا عنساعصآ عمادمون 


8-5 


عجره 1 امع اعمدم عؤدنا عصمرولة] جع + وينوع د 
؟عهامة عا 11:57 صي 5١15/١/70‏ عى لأا ممغعاىء0 1 
ع عام عاط لا+:11ام اااباء بدا ؟ 11 لل ل" 1 


ععع دانم أممعع هم 5 


: 0-0 ”م /00967 :ع اا ١/08‏ 
ع .0 م طاععغ]. ثانالا نالا 





اتلك ت 160و اإطووة 2 00967 :2 ع اا8 لا 


وسيكون شكل الموقع كما في الصورة: 


ح ذنم ذه 72 59 ج« ايو خي امب محامءء 0مأباعء زهم/أدوطاقءه| 5| | © جه 


ا 


55 لكل :النااء01 025 ) أعتتلك )زد :100101 تتتتاكم] تترع :دما 





دأنمعاطاء ٠١‏ سزوم] اماع01 سعط )ألا عتانء الل وتاعصمطخ] ع1 1 
0ل 11111 








نقوم بتعريب اللغة وتعديل ما يلزم من مقاسات الخطوط في العناوين والتفاصيل في ملف الوو50716».0 ضمن مجلد التطبيق 771 وسيكون شكل الموقع 
بعد التعديل : 





تصميم وإستضافة مواقع إلكترونية قسم تصميم الجرافكس صيانة حاسوب وتركيب شبكات 








أع .0 أم طاععغ. /انانانا نالا 


١/8/ 


نقوم ايضا بتعديل الخلفية لكل صندوق والرابط السفلي من حيث الخط والنص وازالة الخط من تحت رابط (تفاصيل اكثر) وسيكون شكل الموقع كما في 
الصورة: 


تصميم وإستضافة مواقع الكترونية تصميم الور ' صياقة حاسوب وتركييا شيكات 


حي للحتي ركم لكر ْ من ضمن خدمات رواد التكنولوجيا صيانة 
واستضافة مواقع الكترونية وتركيب انظمة ‏ : ْ والمراكز بم تتاف توجهاتها عن 
ادارة محتوى تصميم واستضافة مواقع 1 ا تكنولوجيا 





ونقوم ايضا بتعديل مقاس الطول للديف 04ح كما في الصورة : 


1 ده المت . 
عزنا 5 7 : 3181 12151 
612 9 : طع 71 
+ :1155 1: 2512 قلس 





سنقوم الان بإضافة كود جديد للخلفية العامة البرتقالية وهي ان نحدد هذه الخلفية ثابته على ان يتحرك الديف العام «رزهد, والكود هو كما في الصورة 
في سطر ١‏ في ملف 5716.059 الاصل: 


»اها 
8010 #4 ب عدم امع -تمسصستتمس وعاع قط 
: 1703323 - لتنامع وعاء قط 
: (323 . قاط / 25 1303ة / . . ) 1111 
+ 212253 : عاتتعقسطت تع 5ق - لتنامع وعلاء هط 





ننتقل إلى الع6001 ونقوم بداية بتصميم خلفية للجزء السفلي (6001416) ونحدد مؤقتا مقاسات الطول ونضع الخلفية ونلغي ال7ع7010 كما نضيف 
ايضا تحديد لزوايا الفوتير السفلية من حادة الى ملتوية كما في سطر ١/6‏ ونفس الكود للديف :71231 في الصورة : 


201221 . 
٠. . ”“ 171220325 / 2351521 . 8113(‏ ) 111:1 : ققد - لتنامع وعاع مط 
11ت : 1ق 2151 
نا ناك : 1ن 2121 
عتدرنا5 9 : طع 13 
اق لأ : 12373133 قسر 
ترك :نا عدن : 1115 هقع عر م عوط 
0 


زخن 835 35-3 ررض ره 80د وض 


لس الع حسف دس لظ لظ ذظ كس 





تا 


: 0 00967 :ع اا8 0لا 
أع .0 أم لاععغ]. ثانالا نالا 


تلرفااة روعت تا سليا للعيية 2 /00967 :2 ع اا8 ١/0‏ 





وسيكون شكل الموقع كما في الصورة: 


تصميم واستضافة مواقع الكترونية تصاميم رواد التكنولوحيا قسم تصميم من ضمن خدمات رواد التكنولوجحيا صيانة 
وتركيب انظمة ادارة محتوى تصميم الجرافكس قسم تصميم الجرافكس الحاسوب وتركيب الشيكات للمؤسسات 
واستضافة مواقع الكترونية وتركيب انظمة قسم تصميم الحرافكس قسم تصميم والمراكز بمختلف توجهاتها من ضمن 
ادارة محتوى تصميم واستضافة مواقع العجرافكس قسم تصميم العرافكس خدمات رواد التكنولوجيا 

قسم تصميم الجرافكس قسم تصميم 


3 0 





ننشئ ثلاثة ديفات داخل الفوتير لكلا من (آخر الأخبار - زوار الموقع - روابط التواصل ) وقبل البدء بإنشائها نحدد ثلاثة كلاسات ايضا بنفس الاسماء 
للديفات التي سنقوم بعملها وهي (كلاس 2575 للأخبار - 7151401:5 لزوار الموقع - 500151 للروابط ) وستكون كما في الكود التالي : 


لل صر اميه 


002-41 


إكخ آكخرى آكن كين 
1 آم ا كع 25 


قم قم قم قم قم 


. 1122517 





وستكون في صفحة [1[م.<:©106 كما في الصورة : 


يه 


ف[ 
نذا 


لتكت لتكت 3 11 د ا 3 5 لآ 0-7 
8 - _- لت 


تآ 


آكن اك كن اك اطي 5 


"عرمعاومم 1" 5-2 35 ره 2015 


<*031/> عستا آخرو الأخبار<"وببوعم"-1355ع بلطدعف 


ا كر 5ت 


<0031/ »> روابط التواصل<" 113215"-5 135 20313 
<031> زو ار الموقع<"25ه715185"-5 135 01> 


:17ل ره 


تحصبحية . فد 0 |ا-82 .2< عيب 





موف لوكت 10 7 





نقوم بعمل خصائص الكلاس 126017875 والخاص بالديف 226575 وهي كما في الصورة : 


كح 


1 2275 . 
تنا 31 : اع 713 
م 2999 113مع :أعع عمط 
3 عتم5 3222 : 23113 هدر 
م0 ختمة م3 نم3 : 1115 مقع عع لعصط 
: مطلقظة 8 : عم1امع 
21 : قات طح عم 031 
م2 عدوة نم2 : د د مهعم 
: 3315-55111 5 ,522253 , قشتفطلةت 1 : 501-11 1921115-12 
222 1 : 25 513--10111 
213112 : عاضت 1ل 1 


| 


1 
1 
: 
5 


الاك 


قم فم فم فم فم 
خين كين آخن اآخنر آخن آخكر اكير - كن كن 
كل تت 


تع[ 
3 





وايضا خصائص الاتجاه او الاماكن للديفات حتى تكون كلها الثلاثة بجانب بعض كما في كود الكلاسات : 


212751 . 
نا 31 : 310115 
م1 2999 1133مك :عع عمط 
عتوك عنررة كرك عدررة : 1 نوع هر 
322 تجة م3 : 1115 مدع عع عمط 
6م طاطغ :عمل1مع 
21 : دده تلع عع 1ق 
م2 عهدة عدج : 2500319 
: 525115-55-11 1521125 , قناق لت 1 : 10111-13301157 
22 1 : 25 120111-51 
1222 :21535 


]َه 


8" 8 


153112525 . 
10 : طع 13 
ع2 :ه21 


2 كر 2 


| 
ديا كن 
1 رض 


1 11 . 
2ن 31 : قاع 713 
+ 213112 : عقت 1-1 


| ل 
قدأ 


| 
ذت 





للم م 
لزت 4 !| 


سيكون شكل الفوتير كما في الصورة: 
0-0 د نوكا اي يي 0 عم 0 30 مدسمامة رواد المنبولوجيا 0 ل 


هنا آخر الأخبار 





| 
القيام بإنشاء روابط التواصل وعداد الزوار وقائمة للروابط الخاصة بالأخبار 


ننشأ أولا القائمة الخاصة بالاخبار 11 وعمل تنسيق خاص بها في ملف و71».05]ه كما في الكود التالي : 


<" 5و باع 2" ->5 135 01> 

>111< 

<232<>/11/>رواد التكتولوجيا تقتتح دورة تصميم واسضاقة المواقع الالكتروتية <"+4"-2ع2ط 11<>3> 
<83<>/11/>رواد التكتولوجيا يتقدم يعرض جديد لعملائه الكرام<"#"-2ع22 11<>3> 

<3<>/11/>دورات تدريبية لمصممي الهمواقع ومدراء الاعلام الالكتروتي قي المؤسسات<"+#"-2ع22 11<>2> 
<3<>/11 /> عرض خاص يمتاسبة شهر رمضان المبارك<"4"-2ع26ط 11<>3> 

<3<>/11/>رواد التكتولوجيا يهتئ الامة الاسلامية والعريية يهمتاسية شهر رمضان المبارك<"#"-2ع2ط 11<>3> 
<111/> 

>/ 01 < 


إخز آخر إخرا اكز إكز إكرا اكز اكز 
كز 4١‏ 4 شرف رزى |35 إدف ٠ل‏ 


قم قشم قم قم قم قم قم قم قم 


ني 
زك 





0 00967 :عا اا8 ١/0‏ 
تلوافا» لوكت 1ت سار للصيية 2 /0096 :2 عأ اا8 ١/0‏ 


1ع .0 م طاععغ]. ننانانا نالا 





وسيكون الكود في 5916.099 كما في الصورة: 


فز 


1 21275 . 
2لا 31 : طاع 713 
م 2999 113ه5ث :عع عمط 
3 توك عتررتة :123111 قر 
م عتم م3 عتورت : 115 دموع -عرم عمط 
: واطاماظاة اك : م1مع 
21 : قدت 1 دع 01 
2 عتوك عتمك عوك : 3ن دم مهعم 
: 53115-55111 5 ,3232125 , قللتاصلت 1 : 7 1 كته 12 11ت 1 
222 1 : 552 51--120111 
+2122 :11531 


ف[ 
كك 


كن 2ت 


8 رز ره سد 


فز 
325 


ال[ 
دم | 


1 
ب 
ب 
2 
ت 
ب 
ب 
َ 
حت 
أد 
كك 


14 11 111 75ت جم . 

215112 : 1010 عأدع مع 015- عجره 12 

0ك عملالمع 

120111-53 552 : 1 32 

+ تعتصك 2 : عاتان 1122-55-3 

1ع2 72 0ط : 5 11 111 2275 . 
م 1:31511313152نا : قلات 1 ماقعوت ه15- 1ه 11 
+ :عمل1مع 


2 
كن 


2 


ليا ب 


احم اح[ 
20 


ف[ 


أ 


قز 


2 





وسيكون شكل الفوتير كما في الصورة: 


77 ظ 


ا التكنولوجيا تفقعتح ذورة تصميم واأاسضاقه 
المواقع الالخترونية 
ل 7< 22-1 يتقدم بعرض جديد لعملاثه الكرام 
اح لل ل لا ا ل 0 
9 .0 ره ن خاص بهتاأسسبيت تممالهز 22 
ا ل 1200 


بمناسبهة شهر رمضاتن المبارك 





ثانيا : نقوم بعمل عناوين للديفات الثلاثة وعمل كلاس خاص بهذه العناوين وسيكون العنوان عبارة عن ديف صغير داخل كل ديف من الثلاثة كما في 
الكود (سطر ؟١١)‏ التالي : 


خم 


2" وبباع 2" -5 2135 201 

<03/> آخر الأخبار<"52ة1هققعط"-1355ه 03> 

2111 

<11 /“رعحة /ر»رواد التكتولوحيا تقتتح دورة تصهيم واصضاقة المواقع الالكتروتية <"#" عط ههه 11> 
<53<»/11/,>روادت التكتولوجيا يتقدم يعرض جديد لعسلائةه الكرام<"4"ل17عطط 5ع 11» 

<11/,»<ة/,>دورات تدريبية لهعصههي الهواقع ومدراء الاعلام الالكتروتي قي المؤسساتح<"#"-21غطط وعد 11ه 
<3<>#13/#> عرق خاص يبعتاسية شهر رمضاتن العبارك<"#" 2 معط وعد 11> 

<8<»,/11 ,»>رواد التكتولوجيا يهتئع الآمة الاسلامية والعريبية يهعتاسية شهر رمضان الهسبيارك<"#"-2عطط ع2 11ه» 
111 ”> 


| 112 ره 


كن 5ت ك5 رف 


رك ورك ررك وروت ريك رويك وت كت 
كن كن كر كين كن كن كن كين 950 إل 
لزه ذد دم لل 


جم 
حت فم 





وسيكون الكلاس الخاص به كما في الصورة: 


4 11250113122 . 
11101211313152 : 21-513 15 عدم م5- جا رهن 
322 1 : 552 120111-51 
+0 2 : عمل1ادع 





0 00967 :ع اا8 ١/0‏ 
وت لضسووة 2 /0096 :2 ع اا8 ا 


1ع .0 م لاععغ]. ثانالا نالا 





نقوم ايضا بوضع الخصائص لكل كلاس في الفوتير وسيكون شكل كلاسات (71516015 - 11215 - 26385 ) كما في الصورة: 


1 21575 . 
معنا نا : طعت 1 
2999 55113 :عع عمط 
عختجة عررك5 درت : 2313 قد 
م3 جعتمة عترث : 115 مدع عع عمط 
56 :عملامع 
21 : ققه دع دع 031 
عوك غدة عنم : و 20231هم 
5115-55211 5 ,1521125 موقشتحلة 1 : قل لهتة 1 11ت 1 
2 2 1 : 5352--10111 
+ 2131312 : لت 1-1 


قم قم قم قشم قم فم فم ف 
خم 
2 2 كر 42 457 ند 


قم كم كم قم 
| "| («!) سس 


د | 
اكح[ل 


. 185 111 11 34 

213112 : 151513 ة دمج 015- 1ه 2 

تاتاتاك : #ملمع 

120111--53 55:1 

+ 2ج 2 : تان 1-1-5-1 

221 ص : 5 131 111 مص . 
1352112 : 1533 عأقعمح 215-012 2 
507 2 : ماصع 


| 


تم قم قم فم فم 
كر كن كن كر كن كن خم طن كر كر 2 م 0 4 0 4 2 
آرت 4د كن 2 45-7 إرف ره 0 


ف 
زِيا 


ديا 
1 


ب 
اند 


00002251 
3112 : طعت 1 
1211 : ماقت 1ل 12 
1ع2 : قدت 1 ع2 01 
م 2999 55113 :عع عمط 
0 22 نم3 عتدرت : 115 اموع عم عوط 
عوك عوة م2 : 5 دم مهم 
و5 م1 غعددرة : 231 هدس 
253115-55211 5 ,1521125 موقلتحفطلة 1 : 137 للقت 1 10111 


0 


والكلاس 9ع11111: 


1 1 . 
31122 : ات 1 
:21 : 1513 امع 013 
20 : ععملمع 
3 1 : 52 53--01311 1 
: 8ك ك : 3112 111215-51 
م 24999 113همهص :عع عمط 
32 عتج3ة عتدرة عددرت : 115 1مدع-عع عمط 
م2 م5 2م12 تددرت : 12 مع قد 
ةك عتم2 عتمة عتمك : 59 تممقم 
213131 : ماقت 1 1 
( 551315-5-122 ,0211275 م قنتتحتلة 1 : 7آ ل هاتة 2 - ها لات 1 


قم قم قم همل فم همل همل قم همل قم قم 
برك رفم رف ورك رفك يرف رك لرظ ايف رع إزت آرت زع 0 
2 357 ورك [- 1 هد م 


112201322 . 
11103511313315 : 1533 عأتقعطد ومح 2-15 عدت 1 
32 1 : 52 53--031311 1 
20 #2 :عم1ومع 


لزغ إزه) ابرض 
آكخن 25 4-2 اورف ره 


نوها دا 


للق 





وسيكون شكل الفوتير بشكل عام كما في الصورة: 


رواد التكنولوجيا تفعتتح ذورة تصميم واسضافة 
1 اج ال١ز‏ > 1 
الصواتم لا لنمرزوؤنية 
0-6 لعملائه الكدأه 
بعد ير كه إفحة ."0م “- وان 
: 2 0 : 1 سوسم سم د رطمم عررم وم 
معمى اله واقع ممت اء الاعلام البريد الإلختروني : بك يت 1ت هون 
لعا 0 
2 2 
١ 3‏ - إزاىم إل١‏ 5" 1 5 1 05 
ل ا ل ال 2 :1 | [8]] 


بعناسبة شعر رمضان المبارك 


0 00967 :عا اا ١/08‏ 
و ات لضووة 2 /0096 :2 ع اا8 0لا 


ع .0 أم لاععغ]. ثانالا نالا 











كما نلاحظ تم اضافة روابط (تواصل معنا) وعمل صور لصفحات التواصل الاجتماعي في مجلد (100115) وهي كما في الكود «رطم.)12016©:2 : 


<" 5-1325 2135 2017 1 ييه 
<*3313/>: تواصل معتا عبر<"11322تمهعط"-1355ه +2017 ل انها 
روات التكتولوجيا شارع حدة 1355 
</ عط 0 ع0 
حلقون : (09657714490030]0انا 137 
</ درط | اع”ه 
تتقاكس : 009567714490030 ١‏ كاعة 
</ عرطع | 0اناةه 
للاحات - 060طق3 8 15111اتة_للء : البوريد الإالكتروتي 12 
خد/اغطهة 
حجوال : 714590030 
جد/ ا غطة> 
أو عبرصقحاتتا الاجتهسهاعية 


د/ غدطه» 

جه رمدم "32 "حلم 1 1 "و3 . 2 أرمصصمح 1 مجع مع 03دة هد "من لطاع 1 أبمحمحج . عاممطعحة 2 . وود أ : قوط عط "ع مع وهعي 
ده “عد "327 "اطع 1 171 "ون . عأ “رك رمع 1 ”عع 5 13د ه< 2227 . متنطفغط . ووو فر : وواعط "عط قعط ودع 

2ت “هد "32 "وزع 01 171 "ور . ب رك امع 1 "اعمع 5 0< 21217 . مت7تطاصعغط . وار فر : ووطاعط "عع مع ودع 

2ت “د "327 "عع 1 171 "ون نز . 1 “ طم صمع 1 7ععع 5 1213 >< 2127 . متتطفعط . ووو فر : وواعط" ع2 عع ودع 

لد عط» 

1 ره 





نقوم الان بعمل كود او تركيب عداد زوار الموقع ويمكننا اضافته من موقع (:773333.112501111161:.0011 ) كما في الصورة : 


2 59 2--25-5 سك 


اذالا01/|ا1 125 إخاع ا لالا0ي كضشاء 10 ع لاعنلا 

| معلالالا .ونتصمم تمعنع مود مع تصومط نزحم عاععرء *...١‏ 78لا لمعناع .10زمنلا علطا أعلاه الت حنه؟]؟ 1305 أععاامء 300 ع30ممعنةا نزت 10 1ع1انامت عع]] اناه 00م 
إلنام1م 578 7713185 ]1 ,هنا /لز10ا5 1130 نثاع0ن 3ج معو انا0ئ[ 7131 1715 اأأنقا أنه 01لا .]ع نامع ]ناملا 10 3000 عط |اأثا 1130 3 ,511 ؟ناملا 5أأ5آلا /اكألانامء لعل 3 11017 
"عع الاع5 عع]]1 أ3قع]01 11 101 13015 !1315© 3010 1101111311011 37132130 اأتعلاع] |اأنقا اعألاناه2) و3اع ناملا ناه وقلاءذاء أناط ,و(الأقعع اما 7701 132 16أ5 








3أوأ/ا أدعلالا - .!! م8 - 


ع1 لالا00 ععجعء عنا0ل ع افع 0 /-11 لام ا 5لذا 


أعدع | .مماسط عومهءه عط عاعنتاء ,لع لاعتو عأنميز معطلالا .عفبعط تعادنمء ملز عدأتصممون © 





د5عء امك عرواا مذانا وداع © 5 نامج مه © :5116 ناملا زه الاوا5 
0 ذاء36 ا وذاط نم5 + عععععع # مام 0ملام,واعد8 ؟ 2 | اماك 10 55و13 تاناحم :3 الآ 


ا أصنام2 بزع ابم وحم /تزماك 





|)؟ 2 ] 1395 ]0 75انااه © 
ا دوداءع أه ععطصسل؟ تاماك سس 


١‏ 66666 01#اه0 1ه10م8 7 و)وازوذ/ | 00100187 ]0 م10 مه اء0ق ا 
118انا60 عقا 8لا0! 61 << 


(511015ألا ]ناه أنا8) .كلم لأععاع5 ناملا ورأكنا الاءألاع1م أعأرياه) و13 © 


1005 


4 , 333 لا*لا 741 , 4و4 515 
ع 351 4 312 كك 766 , 5 جد كه 
3, 275 0 650, 407 51 
3 269 لقنا 759 , 399 نكا 
1 250 لا 0 376 386 5-1١‏ 


١7 6مشاء‎ 1 





نختار العدد للدول ثم الاعمدة واظهار كلمة زوار ام لا ثم خلفية اللون ولون الخط والبوردير ثم الزر البرتقالي الذي يعطيك الكود. وسنقوم بعمل العداد 
الخاص بنا ثم نأخذ الكود ونقوم بتركيبه داخل ديف 71516015 كما في الصورة التالية : 


: 0-0 ”م /00967 :ع اا ١/08‏ 
.0 م طاععغ]. /انانانا نالا 





وت لضسووة 2 /0096 :2 ع اا8 0لا 








ع1 لاالا00 ععجعع ناولا ع افعانت /ا-11 للم ا 5لذا 


لالا تعتعط تعأصنامء عناملا عدأدرمؤون © © 


3 

م0 2130 11115نا0 2 م0١‏ (» :511 اناملا 011 /010 51 

#ا 5اء36 | و3اك لاملا #عماه© 0ونامروكاء83 5 20 | /ثاهط5 10 5و3اع تاناح 32 اا 
#كا نامي باع ألاع ودس الاو لات واعععمم6 #أمامت 10 3 2 | 21395 ]0 7705]نااه © 

ستأفجيط ا ووه اسن 0101# 8008 3 عروم أ 181ألانام2 أه مه1 مه اعم3 ا 


01118ا60 ققا"ء 8لا0! 621 << 


.0115 تأععاع5 ناملا 0 أكنا الاءأناعام أعأرناه) و13 © 











4 


ثم التركيب كما في الصورة : 


قسم تصميم الجرافكس قسم تصميم 
الحرافكس 


رواذ التكنولوجيا تعتنتح ذورة : 


المواقع الالكترونية تلغون نة] شاء ١3‏ 
: 00967714490030 


ب : 9/21100.60111 أناكنالا_مع 


أو عبرصفحاتنا الاجتماعيه 


ال ات ا ا ل ل ان ٍِ ىو 6 1 


يمنا تعفية تتعتهز ( مصان المبار ك 








نأتي الآن إلى ديف أخير للحقوق ورابط لمن قام بإنشاء الموقع ثم ننتقل للمرحلة الثانية من بناء الموقع وسيكون اسم الديف وكلاسه 20731151105 كما 
في الصورة أدنا : 


في صفحة «رام.):12016 : 


<--تيهاية الديبقهء الجاعم--1. 55 

د/ عدطء | مك 

<<" 213111235 تلأجروج "5-7 1335 2-015 57 

حفميم العحقوق متاحة ومقتوحكق للجسشيع 55 

</, عط | كك 

<ق/»رواد التكتولوجياح<"غع22. متصططمععط . اوما/ “ر : ووطاعغط"-7ععط دع : بقدم من إفان 
</ عدطه»ه 


+037 ره 

252 21ح 5 “رهه" ص نز . 7770775131232 221 ودع مجعم "نمطت تتككة و رطعم "عدم ويا 1م 1طن 5 > 
<12جم1اعح 5 “ 5" 5 . 7522121 011221 2ع "”عخمع 5ه "عاج 21ت 5ق كه و راعرمج "حم وريان لأج1اعطع 5 > 

تتقصط رع 

<لستعاتط رع 


. 
2 0 


3 إل كت كك إك 


السل تسم تسل اسم كم لس كل سم قل مس( كم قم[ قل 
؟ ل [1 
1 ك 


للق 


لكت لبه 





: 0 00967 :ع اا8 0لا 
ع .0 م طاععغ]. ثانالا نالا 





اتلوافا» لوكت 1ت علو للصيية 2 2:00967 اناا 








كما نلاحظ تم عمل الديف خارج الديف :12231 او الديف العام وسيكون الكلاس الخاص به كما في الصورة: 


221211221 : 13121 5- جاعج مع 

5315-5521 5 ,223255 جا , قتتالة 1 : 17 ل كقتة 11ت 1 
122 : 531255--1-0111 

قات 111:1 قدس 

م 95 : طع ك1 

+22 #4 أعملامع 








وسيكون شكل الحقوق كما في الصورة : 





واد التكنولوجتا 


نقوم باستبدال الصور في السلايدشو بصور أخرى كما في الصورة: 











نقوم بتعديل الطول للديف 100167 ونضع القيمة ٠٠١‏ بكسل في ملف الووح.»5)916 كما في الصورة : 


له كس 


١128713‏ 1م عاص 2 ثرت واقتقة / . . ] 111:1 : 8و قنسد- مستامع وعاع مط 
عات : عاطق 15151 

2 ات : 11ج 5151 

16 : 

6عآناة. (أ : 133 0ع هلسر 

5232 63لا 5ن : 5303115ع عع عمط 


خرن 55 45-7 إرض 


ها دعظ كس 


3 
8 
83 


له كس 
تنا 





أع .0 أم طاععغ. /انانانا نالا 





دل 


وسيكون شكل الفوتير كما في الصورة: 


0010111 ل ا 





تقسيم الصفحة الرئيسية الى ثلاثة أقسام ونعني بذلك أن نقوم بتجزيئن الصفحة الرئيسية إلى ثلاث صفحات (7ط1م.1206 - - «نطم.1ع106 


مطام.عع120). 

مطام.::016ؤ:هذه الصفحة الرئيسية وستقوم باستدعاء الجزء الأول الذي سنقوم بنقله إلى [1م.12016:21 ونستدعيها بواسطة دالة ©12011106. 
طام.1 6 : تحوي الجزء الأول من الموقع ويتضمن نقل الاكواد من السطر الأول إلى قبل نهاية ديف القائمة. 

م.1062 : ويتضمن نقل ألاكواد من بداية الفوتير إلى نهاية الصفحة. 

م.1306 : وتتضمن البقية من بداية السلايدشو إلى قبل نهاية الفوتير. 


وكما في الصور التالية: 





١/0811: 00967 #0 11‏ 
اه عت أعم.هأمحاءعع]0©1)م1 :اهمع 772755202 2:00967 8|115 ١/0‏ 


صفحة «رطام. 1101621 


<0112017 . 31151131313131 2 1 - 1 لللاعا لله 1 101 /, 1 للااعا قلع 11 513 . 13 . تامام “ىر “ر : 8121219" "لظا /, 9311317 11533151121 لا. 1 ملل 1 للكت 11لا “نالا “ر-"” )مامالا لللما .2121 زعان)(]! > 
<<" 7071تطلع 1999# روعده . 3 . موود /ر ثر : وا عط" -5 لمع لسعغطع 
تمه عضا 
وى "2-8 ع وجنام ومن فطع : انعط ”رامع "عتما ورت ورمع "عون 1- تع يه عومد "ع 1 يوم -وطغط وطعاعنة 
<2 1111 »212225 15337مسطععء1 [ الروادت لتكتولوجيا المسعلومات<21515> 
دث/ر "نوج رطبرمع "عم واه عقت رقت زنتعق "ج هضع "ترقت , ت امتطق رققج "2-27 مم 511 11> 
در "ددع . 22175253112 1جرع "2-7 معط "اودوع ريرم "عم وريتن ‏ "امع وم 7531 -1مع2 51 11> 
2ج 1عع ته “عد "5 77 ناك 3“ 2912121ه "ممعم 21ت 5تكمة و اعم ع "عم ولع أم1عج 5ه 


كم 25 


0 ركف 


8 


جسا ‏ الالدلا جه 
</ "511"ح-ش 1د لهم "دمع رعبرمع ”عمورياة "امم رطوع انتع "مع "دوج , 115 قث “ردعع رطمو" ع صعط 111 > 
لاع حاءاراي 

مط 

2 -- هقا يد ايك الديقف العام لاه 


"72 1دشهه" -5 55 رت 20011 


خ-- هتا يذدذاايك تر وريبسك العوقع--!+» 
< ""عرم هم 5" -5 5ه ات 20139 
<:/ "5357 1:ة"-5 155 "7 وتتس . موه 1 “رك 2 وهسة "”ععع 5 1ددع 


117 ره 

12-- هت ا يداأيك القائمكت- !1ه 
<<" ينمه" -5 55 رت 20011 

2111 


322,11 / »> الرئيسية <"صطح . ممم 2-71 عقعط ع2 11> 

11م مدق ر» حعدماتتا<"13عن #4 "7ج مصعم وهة 13> 
13 رعتة/»من أععالئلتات"#"ل-2ععط وعد 13> 
<13/رعجه/» آخحر الأخبارع"#"ل2ععط 11543» 
<11رعجة »يتن تجنتة " #4" معط وع< 11> 
1131 رعدة/» اتصل بتاع" #"ل1ععرعم وع< 11> 

111 > 
<031 > 
|<--هتا تهاية القائمة--!» 


5 اطع ام 2 ١‏ 
3 2 1 ا 


3 
حل 


ع" 





صفحة «ردام. 11016::2 


عونت إلى ايك القوتير--!ه» 
<< "عردم امم 2 "حو م8 قم 1ه 2011 


إطتع| 26 


ع رس 


2" رباع 2" -5 5ه هرت 2013135 

<03#/> آخر الأخبار<"1352قهعط"-1355جه 03> 

>11 

<11/»<ة /,>رواد التكقولوجيا تقتتح دورة تصهيم واسضاقة السواقع الالكتروتية <"+#" 72عطط دع 11> 

<13/,»<شة ,»روات التكتولوجيا يتقدم يعرضض حجديد لععسلاكةه الكرام<"#"-2ععط 4< 11> 

<11 “#ر»>حة /,»>دورات تدريبية لعمعصههي الهسواقع ومدراء الاعلام الالكتروتي قي الهمؤسسات<"+#"-727عطط ع2 11> 
<11/><ق /> عرض خاص يعتاسية شهر رمضان العسعبارك<"#"-2ععط 5ه 11> 

<11 “رعدق/,»روادت التكتولوجيا يهتئ الآمة الاسلامهية والعريبية يعتاسية شهر رمضات العبارك<"+#"-2ععط ده 11> 
<111/ > 

<01 /ر > 


أنه د دف 15 ك2 


زه )| 


زشما 


كم 3 


<” 1312125 "ع5 قه1زت 01> 
<033/>: تو اصل معتا عبر<"201352عط"-53 155 03> 


روات التكتولوجيا شارع حده |0 2 ا 

د/ر حرطب .. كه 

تلقون : 95577145449000313انا نأا 

د/ر عطي | اسم 

تلقاكصس : 93577144900353ان بعر 

د/ر عرطج | عيرم 

للحت . 8173150 15112امز_للء : البريد الإلكتروتى| اثلث 

د/ر عط | حارس 

جوال : 71242490030 لمم 

دير علطت | برس 

أو عبرصقحاتتا الاجتماعية | 2-3 

د/ر عرطي | كنت 

جه ارعد ىر "327 "حتطاع 177101 "ونون . 2 “رك دمح 1 "عمع 5 111 عد "نط7 طحت 1 ايقتتدح . لاصمصطم تح 3 2 . اودر أر : لوععط" ع2 معط ودي> 30 
حت ”رد ثر "7ن 3 "ولج 711 "وو . ع رع روج 1 ممعم 103ة عه "226 . متنطعسط . اوور ثر : وععط" ع دعر وده | ادك 
جه ارد “رتل1 1 "وجي “رع ممع 1 "؟عصع 5 مسد ع "2215 . متوطععط . وود “ر : وواعط" ع عع وي 32 
ارد "3 "ج711 "ووز . 1 “رعممدع 1 "مصعم وندةد عد "تب . متتطعسع . سومار ثر ب وععط" ع مع ده | عاك 
دير عرط©طة اا اناك 

35 >» ١11 


5 
-[1 


2<" موطروع 5-7151 35 1ه 2011 





0-0 /00967 :ع اا ١/08‏ 
اتلك ت 16و [إعووة ا 0 0 ا 1000 


ع .0 أم طاععغ]. ثانالا انا 





١ 


صفحة «دام.:1000 : وهو الكود الذي ما بين نهاية القائمة 


<-- 12521323331123 تامطس 5131312--1 م 
<"7ع5132"-5 1855 2039 
<<" 53131211 ممع -12 13102 ك ندم" -00 1 2037 

111>ه" 120325 5_1" - 5 35 1 20115 
<11,»</"ذنا_1وههمه”-101 "برحيا يكم قي دورة المواقع الالكتروتية"-81512 "عتوان 1"-211 "قضج. 1 /ردءعوهسة / لمعهق "احععه موسدع< 13> 
<1_1"/<>,131هقههمه"-10 "عنوان 2"-61512 "عتوان 2"-211 "وصج. 2 رد ءعوهسة / لمعهة "حععد مسدع-< 413 
11 رد" 1_2وهومه"-10 "عتوان 35"-51512 "عتوان 3"-218 "وص . 3 رد ءعوهسة / لمعهق "جعع د يمسدع- 13> 
11 مرعد/,"1_3ومههم»ه"-10 "عتوان 4"-615128 "عتوان 4"-212 "وصج. 4 رد عوهسة / لمعهمة"حعع د مسدع-< 13> 
<11مرعدم,"ة_1وهومه”-10 "عنوان 5"-51512 "عتوان 5"-2112 "وضج . 5 رد ءعوهسة / لمعهق "”جمعع د موسدع-< 13> 
< 01 ”رع 1ناكر» 
220115" قبا 11ناط_ كه" -5 35 1ت 2017 
<ة “> 1< “, ”2111-20 311:12 5 اتات /, 00111195 7 0331 ”عع 5 ونذد <<" عتوان صقير"-23116 "#" امعط وي 
جلة “رع 2< ث/ "7 قن . عاطدع دع /, 25 00113ط ,1ه هت "احعمع 5 يمسدعد" عتوان صقبير "-21218 "#" 2 معو وي 
جلة “3< ث” "7 283 . 1507331235 /, 05113125ط / 21 قت "عع 5 قسدعد" عتو ان صقبير"-21218 "#" 2 معط وي 
جه “ر 4< ,"297 . 3211312151“ 113125صمط /, هع قت "اعمع 5 قمسدعد" عتوان صقير "-21218 "2# معط وي 


جق “رع 5< ث7 323 . 111325 ”,265113125 /” دهع هق "”عمع 5 وسدعد" عتوان صغبير"-21218 "#"- 1ع عط وه 0 ك 
<1 “ر عدص 1ل رج | الك 

0157 ره "[تم مقطاة_ع" -5 35 1ع بلططعف ل 

1 ره 1 

01 رج ا ا نسم 

<:-- تاقطكى 513132 120 اه 3 

3 

خ3-- بيدايك محتوى الموقع !اخ 5 


21ت اودع "5 35 ره 01> 
<"يتوطحوه ع 1535-7 201359 


لزه |03 


ا اطع اطع اطع اطع اطخ أطثمر اطخ أطخ إطثن إخعر 25 50 


<2خط/»ماتقوم يه رواد التكتولوجيا<22>» 8 
1112 5 
حدل1> ا 
موقع إلكتروتي متخصص قي تكتولوجيا الهمعلومهمات ويقدمعح خدمة تصهيم واستضاقة السواقع الالكتروتية والتسويق الالكتروتي 1 
مواقع : رههمية - إخيارية - تجارية - تعليهية -قواعد بياتان 00د 
! علآتات شولك : قيس يبوك - حوحل - تشوان الكتروتيك زضقفية 5353 
دراك 34 
<03157 / > 35 
356 
<-- الجرّء الثاتي فقن الهمحتويى --!> كُّ 


2 
ده[ 





"101-3113 "3_5 1ن "عق 1535 2017 


الخطوة الأخيرة وهي اضافة دالة 120103016 لبداية ملف م11م.<11:16 واستدعاء الصفحة [1م.1206:21 كما في الصورة : 


| اطخ ( 


252 تم ( "حرطم . 155121" ) 11111052 ترتتامر > 
بنفس الطريقة السابقة نقوم بإضافة الصفحة ممطام. 11106:22 لنهاية الصفحة ممطم. 11101 كما في الصورة: 


بواجت تهايك محتوى المسوقع جح ا تي 
22 م ( "”صطح . 2د مح 1 " )  11-11102‏ حرطاحر2 > 





بعد تجزيئ الصفحة الرئيسية واستدعاء الملفات او الجزئين ستظهر الصفحة الرئيسية كما هي سابقا. 


: 0 00967 :ع اا8 0لا 
ع .0 م طاععغ]. ثانالا نالا 





اتاو »وات 00 6زوا الضيوة 2 /0096 :2 ع اا8 0لا 


المرحلة الثانية (قواعد البيانات) 


سنقوم بعمل الجداول التالية (القائمة - الخدمات - الأخبار - مدراء الموقع ) : 


قاعدة البيانات )ع 171:06 


لم 00 0 مدع 
00 1 ا 0 


11 - 0دعط غ096 -10 الرقم - التاريخ - العنوان - التفاصيل 


- و جر مرمآ 0-0 


وسيكون شكل قاعدة البيانات مع الجداول كما في الصورة : 








[م]غكوطادعها » © تععرمم »> 594 مله 


5 استعراض | تلا يتاء | (لم 501 | هذا إيحث | 3# إدخال | 4م تصدير | +2 استيراد | طق عمليات | 36 17,0065 








الجدذول 5 ىك العملية صقوف إل توع مهل ولام الحجح الحمل الرّاند 

0 لأصملج 5 استعراض تمق بناء 8# إبحت 6غ إدخال 79 إفراغ 9© سقط +9 100108 أء_اواع0عو5_9أأنا 16 كيلويايت - 

ل) لالصعدم 1 استعراض جمزا يناء ا إيحت 8 إدخال ذا إقراغ © سقط >9 2008| أء_اق1ع0ع05_9أنا 16 كينويايت - 

]) كلئاع0م 55 استعراض همق بناء ذا إيحت 6 إنخال هذا إفراغ © سقط +9 0(89ا10 أحء_اق'ع0ع5_0أنا 165 كينلويايت ب 

[] رعو 7 استعراض خملا يناء #. إيحت غط إدخال © إفراخ ©) سقط >9 8لا070ه| اء_اقع8_060نا 15 كينويايت - 

4 جدول (جداول) المجموع 0 ؤنامهها أء_الوععموعون_ق)أن 64 عيلوبايت 0 بايد 
4__ 0 تحديد الكل ظ مع المحدد: ؟ ظ 


والجداول كما في الصور التالية : 


جدول :21:11 : 





]غك مطادعه! » © غععرمهم > 4 مملد 





[5] استعراض | تلا يناء | (لم 501 | ذا إيحث ٠|‏ 6# إدخال | +] تصدير | +2 استيراد | طق عمليات | 36 1110065 


# الاسم توع 0 ١)‏ الخواص حائي إغتراضي إضافي العسلية 
1 10 (11)3 نا لاصىء طلااعالاحن|١ا_0آلالم‏ م تغيير © سقط 9 أساسي (0] فريد 5 فهرست :5 |3]13م5 (72 التص كاماد [5] 0865| 015410704 
لا 2 ع73هم (31)88اع:3/ اء_لوعمعو_وتأنا لا الاتىء تغيير © سقط (يي أساسي [و] قريد [جنْ قهرست 56] |503:13 [72] التص كاماد [2] 30065/ 001511004 
(]) 3 ل10منلاوكووم (3)88اء3/ا اء_اأقعمعو_ةأأنا لا لاقىء ىم تغيير © سقط (ي أساسي 9 فريد |[ فهرست 75 |213م5 5 التص كاماد [5] 85ن|ق/ا 01511061 


4__ [] تحديد الكلمع المحدد. 9 استعراض تسم تغبيير ‏ © سقط 9 أساسي ] فريد 4 فهرست 


0 /00967 :ع اا8 0لا 


أ .10ج اع ع]. لا /الالالا أعم.وأم داعة0©1)م1 :تدمع 772755202 2:00967 || ١/08‏ 














جدول 1111111 


]غك مطادعه! » © غععرمم » 29 ممعم 


5 استعراض | آل يناء | (ل 501 | ذا إيحث | غخ إدخال | 4ه] تصدير | +2 استيراد | ّم عمليات | 26 11109065 


# الاسم توع 0 الخواص خائي إقتراضي إضاقي اد 
[]) 1 لذ (ك4اما لا لاصىء طلااعاراع0|"ةا_0آلاه ضى تغيير © سقط هي أساسي [5] فريد [5) فيرست 75 |2]12م5 [5] التص كاماد [5] 1085ق/ا 015110761 
0 2 لوعط (77)موطعيو ع_اوعمعو_وقأن 3 لاسي تغيير © سقط (ي أساسي [] فريد كن فيرست 75 |3613م5 [2] النص كاماد [2] 5عن|ه/ا 01500064 
8 3 4ه (222)دمه م _لدععومو_8ثان لا لاتلىء صم تغيير © سقط 9 أساسي [9] فريد 5 فهرست :5 |2413م5 |72 النص كاماد [5] 1085لا 00151101 


+ [0] تحديد الكلمع المحدد:: 5 استعراض م تغيير ‏ © سقط هي أساسىي ] فريد 4 فهرست 


جدول 1161875 





[2]غكمطادعه! » © غععرمعم »> 79] ددعم 


[5] استعراض | تا بناء | ([للم 501 | ذا إيحث | 6 إدخال | 4م] تصدير | (5 استيراد | وى عمليات | 36 12199615 


# الاسم توع 0 ١)‏ الخواص خائلي إغتراضصي إضافي العمئيه 
0 1 14 (3)غما لغ الى [لااعالاع0|١ا_0آلالحم‏ ى تغيير © سقط 9 أساسي 7 فريد [45 فبرست 5 |2:13م5 (72] النص كاماد [5] 085|ق/ 015]1061 
[]) 2 056 (3)33اعقىا أع_اويعمعو_ةاأن لغ #تليء ىم تغيير © سقط ( أساسي فريد [ئن. فيرست '55] |2012م5 |7 التص كاماد [-] 2/025/ 01511001 
5 3 ل0ههعط (3:)222اعرهن أء_اوعمعو_قتان لا لاتسىء» صم تغيير © سقط 9 أساسي [9] فريد [45 فبرست /5] |2413م5 [2] النص كام [9] 085|/ 01511071 
ل] 4 غعل (32)333اع3/ اء_اوعمعو_وتأن ل لا تلىء تى تغيير © سقط يي أساسي [ه] قريد [ج؛ فهرست 56 |503412 [72] النص كاماد [2] 85ن|3/ا 00151004 


جدول 5017 


اكاك 1 0 رد 


[5] استعراض | آللاآ يناء | ([لم 501 )| ا إيحث | 6 إدخال | ]| تصدير | إن استيراد | ©ّى عمليات || 26 5,ع و1010 


# الاسم توع 0 ١)‏ الخواص حائي إغتراضي إضاقي العملية 
0 1 10 (3)غما لا الاصىيء [[العالاح08١|_0آلام‏ ض تغيير © سقط هي أساسي 59 فريد [5) فيرست 75 |2412م5 [2) النص كاماد [55] 3|085/ 1061أوانا 
6 2 0ههصط (88)تطععه ع_امعمعو_قشن ا تغيير © سقط 2 أساسي [33] فريد [عن فهرست “5 |3412م5 [7] التص كاماد [72] 5ع نالا 0064أوانا 
6 3 وما (3,)222اعقن أء_اوعدعو_قتان لا لاتى» صم تغيير © سقط 9ي أساسي [9] فريد [5 فهرست :75 |3812م5 (2 التص كاماد [5] 0085ق/ا 015101 
]) 4 غ06 (3)333اع:3/ أء_الوعمعو_قتان 1 لاتىء ىم تغيير © سقط 2 أساسي [ه3] فريد كي فهرست 756 |503813 [7] التص كاماد [72] 165لا 0151104 


7 ([] تحديد الكلمع المحند. 5 استعراض هم تغيير © سقط هي أساسىي 53] فريد 5 قهرست 


' 0 /00967 :ع ||08)/ا 
التو ١ت‏ 406 





اه وات زو المووة 0 0 00 





مرحلة ربط قواعد البيانات مع التصميم 


في هذه الخطوة نقوم بعمل مجلد 20121 للصفحات وكل جدول له مجلد وسيكون كما في الصورة : 


عات عم لمع ا #العصحى عذونا عحرول"ا 
عاد عاط اندم ”ا متصموة إل 
؟ع العامة عاط 11 * م لاير١‏ 'بة1 1 لاحع كم للى 
]ع العامة عاط 1ضا+ م ابة+ 'بة1 ”ا تحار لل 
؟ع العامة عاط 11م لليةء 'بة1 +1 يبحت لك 


نقوم بتصميم ستايل معين للصفحات التي ستدير الموقع وتتضمن خلفية وديف وتنسيق للنصوص وسنبدأ بصفحة الإدخال الخاصة بالقائمة داخل مجلد 
اوعد ننشئ صفحة اسمها م1[م.)122561 والخاصة بإدخال البيانات الخاصة بجدول القائمة. وسنقوم بعمل كلاسات للتنسيق وذلك بعمل ملف وو© 
وسنسميه 2011111.059 ونعمل له مجلد بجانب المجلدات أعلاه ونسميه ووح. ندخل الان المجلد »71 وننشئ الصفحة (17م.125©11 ونقوم بعمل 
الكلاس اللازم وربطه بها. وستكون الصفحة «[طم.71ع125 كما في الكود: 


<2831516/>صقحة إدخال يبيياتات القائهة<281516> 

</ "ققج عجرم "عم وريتع "عتم توت رز 5 2851-7 "53ج . 12نتة شت “ردقه / . . "2-27 معرظ 1 11> 
<0ندع 2 ر> 

>200157< 

<03127تةة ">5 135 01> 


إزف إزه (ظ إدف 0ل 


0 


<0415/> إدخال يبياتات القائمة <"ط"-13535- 01> 
</ عط>»</ عط> 
القورم هتا 


فم قم فم فم 


ليخ إخي 000 


<015 / > 
<تتقمط > 





والملف الموجود في مجلد ووح والذي اسميناه 20212.55 كما في الصورة : 


1ع ةدا 
: م 747474 بعرم 1مح - لتنامع وطاح مط 


+ 112ستقت . 
21211 : 1م لمع - ل قتنامع وعاع دظ 
م1 133ه5 65ق2 مععم عمط 
نا ناك : طعت 1 
3 نا ناك : 3115 121521 
تعاقتت 231:7 قلط 
251 : نه تاعععمع 1ك 
553115-51 ,5211273 ,م قنتان 3 1 : 137 1ناقة 12 11ت 12 
22 1 : 953252--111نت 1 
:112 ج55 م1 1 : 25 1 مهم 
عتوة عدرة عمش : 115 مدع ع ع معومط 
/ 


نم8 


21 . 
5353115-51 ,5211273 ,نات ل3 1 : 7خ113ناقة 1293111-12 
ع قمع : عمل1لوت 
11115231131312 : 1533 طانقعد دح 2-015 عدت 2 
:ههج : 211313- مارت 1 


كن كن كن كن خرن كن 
كر 85 -45 إرض 


له 





: 0 00967 :ع اا8 0لا 
ع .0 م طاععغ]. ثانالا نالا 





اتلوافا» لوكت 1ت علو للصيية 2 2:00967 اناا 


وسيكون شكل الصفحة ام.):اءودز في الرابط («مرد[م.)"1 1125 / ندع د /سنحس 2 /ا»ء زه:1م/)1417://1022105) كما في الصورة : 


- نف 15 7 © « نه خىي مب نام اع ك0 اناطع 0/0 أله عع زمنم/أووطاقو| 5ا | © جه ©» 


إدخال سانات القائمة 





نبدأ بعمل صفحتي الفورم وعملية الادخال الخاص ب جدول 12361211 (125©1]_210655 - مرطم. ]نكم ة) : 
صفحة م.1051 : 


<031/,»> إدخال يبياتات القائهسة +<"ط"-5 15ت 01> 

جد/ عرطعد/ عرطة> 

2031 

2" باقنج” -111050 1212 "وططم . 535ع20522ج«_عاطعء 1115" -10121عات 3 10111 > 
د/ عدط» :العتوان 

حدر عرط>< "لت ع1 "ع م رمم "عجرمع "حم وريتع انائزة 1 > 

-/, عط»> : التقاصيل 

تدع 2 شت جرع ب “>5 "7 0ك "حم رمه "77 "جم وزوعر "ازعم" -51716 م دمع ماهجزه يا > 
دم عطهة» 

<"_قلظ"-115 7751 "2 1تنتطناص "مو 21112 1 > 

20111 ارج 

> 015 

قط ”ره 

< لقاع ار »> 





شكل الصفحة بعد تعديل الطول للديف 01 إلى "٠١‏ بكسل: 


7 © «« لع شق مب مطام انع كص نامع د /صتحصلم/عء زمزم /أومطاقءو| 5 | © جه ©» 


|دخال سانات القائمة 








لإعماماع ال ل ٠‏ 0005 
اتلك ت 160و اإطووة 2 00967 :2 ع اا8 لا 


ع .0 م طاععغ]. ثانالا نالا 



































نقوم بعمل صفحة [ام.021418» والذي يحوي كود الاتصال بقاعدة البيانات ونضعه ضمن المجلد 1004م والكود كما في الصورة: 





تادر > 


("" ,"امومع" ,"ناد مط 1امعه1" ] امع سصطدت 1ه 5ه > م5 
("207عات عمدت تاتسمدع " ) 012 عه 


لطامت5 , "عع ومعع") طنق_عاعع 521 _515051 


عت 


وايضا قمنا بعمل ملف اتصل آخر «ردام.01452» لصفحات الادخال كون الكود السابق ينطبق مع صفحات اخراج البيانات وسيكون الكود لصفحة 
منام.2ع11درم» كما في الصورة: 





اللتامرث > 
3 : © و 0 ا ”م ١‏ . 1 1 5 
( "تناع [مطعس"  ""”,‏ "ناص م2" , 31م 1ه15") نامع مدت 115211 لمت 5 
2 


ملاحظة : 


في صفحات التعديل والحدذدف نستخدم الملف مطم.ع صم وفي صفحات الإخراج لستخدم او نربطها بالملف مطم. 021152 


صفحة ررام.ووع111561]_710 


<2812512/» عملية ادخال البياتات515185>» 

دمر "دوج ارعايرمج اعمورياع "امم رومع تق "ع ضع "مك2 . 1 تسمه “دمج 7# , "جع مصخ 1111 > 
1220 ري 

تال مطةه 

327 1نققة "-5 135 2-0313 

نتنادر > 

("”ططم . 21352 دمع “/ . . “ . . ""]) 111102 


[ "مدعط ' ] 5_2051 جمهعطة 
[ "ع0 ' ] 20513_وحباع 50 


" ("عع20 ' , " معط ' ) ظالائلتتق؟ (2ه22 ,لدعغط) لتاتلاعم 111120 1115581 "1-7 ن 5 5 


( (5591 متم 5) تاععناك_5:5511 ! )1 12 





1 
( (لامجح5) مععع_ 1075411 ٠.‏ " :2#م 012-2822 
0 
"تست الاضاقة يتجاحعم" قطعع 
"”<32 ,»عودة للرئيسية< ' تطح . 2022 1د / . . "امعط وي" مطعم 
(لطمع5) 1532 _ 1175011 
عل 
01 ره 
دتتقومط ره 


في سطر ١١‏ ربطنا الصفحة بملف الم1م.2»021552 والتي تحوي الاتصال بقاعدة البيانات ولاحظ (/../..) أي اننا نعود للخلف لان الملف في المجلد 
الرئيسي بالموقع وبقية الخطوات تعلمناها مسبقا. في سطر ؟ رابط العودة للرئيسية سيتم ربطها لاحقا بعد الانتهاء من ملفات المجلد ::«»: الخاص 


5 


بالقائمة. 


وبهذا انجزنا عملية الإدخال نقوم الان بإنشاء صفحة 1[م.12)16:2 والتي تعرض البيانات وتحوي روابط للتعديل والحذف وهي كما يلي : 





١/08 ||: 00967 0 0‏ 
لالتحا أع0.0أم حاعع0©1م1 :اأجمع ‏ 772755202 2:00967 || ١/608‏ 


فز 


الزللادر 2 > 
: ("”ططم . 13 1 نمت / . . # . . "") 11211102 


("ناقت 1 85 الاظللظنة لتتمطعم نيم م 1تاظاظة " ) باتع ناك _1ن قمتم- ط 1 نادعع 5 

ع2 

لاع 11 > 

21212 القائهة<4512512> 

"دوع ريرم "احص وري امم ووه 171 5 " ع امع "وق2 . ن تسله “ددع 7 . "27 مع 1ن 11 > 
0ه 12> 

لوثم 2-87 عم وعتقطت ‏ : لقتتغط رععومع "ارورم تومت "لصوي 1 - ع معط نندت "7 2 1 ناوه سوط ا 3عا2 1ه 
20 215 > 

لعرااء هادا 

2<" 22 تسمه "5-7 535 زر 20319 

< رعدط»< اعتطعدة /» إقاقة جديد< "ططاح . امع 1535" 1عغعط وي 

ترتامر” > 


كن 5 435 رف 


[ؤه| قت 


ع ا 
- 
تا 


"جع مي ومع حون 511 تاحصم عمط "1005 ' خطع 2 1ج م لطوع >" مطعع 
١"‏ 0ل "عجرن [معوط عع ة" مطعه 

م "الع /, عتوان القائسة <#280>" صمطعهم 

: "نوع #ر»#تقاصيل 22505" قط9طعع 

م "<قاع ,»تعد بل 202 >" قمطعع 

ع "الجعرع ره" قطعع 


+1 (52لتم حح 11 دمع 5خ 11 
125 ل1لتضقط ممع ععئائاعط :1910 // 2 (()عمععع_1ني5تتم) 01 9 
0 8 
1 ((111قع52) تلاقطاعطة_طععاع2_لوديته - تتمعد؟) 112طهنا ل الدث 
ع "اتنعرع هع" وتزاعع ل 
"تمع / >" . [ " مدعط ' ] متمع5 , "1ج >" ملاعم 3 
"احتلمط ثرة" . [ " لمك ' ] بجمع5 , "جم >" مو5اععم 351 
م "ااانا ردق »> عدقد< " [103 ] #امع -0 21 برطم . 218 1ع4 ' عت صعط 3ه |[ جة/,»تعديل” ' [10] مامع 10-2 صطم . 5011 ' <-2 فعم 0225 >" مومع 32 
0 33 
"27ت اطوع ره" ملطعع 34 
2 35 





تم وضع الكود ضمن ال(:7003). وستكون النتيجة كما في الصورة بعد ادخال بيانات تجريبية : 


5 نف 6 7 © «« بنع شخي 0ب 0/7 براعع زه نم /أومطاقوا ذا 0 + ©» 


تفاصيا 
تفاصيل هنا حول الرئيسية 
تفاصيل هنا حول الخدمات 
تفاصل حول من نحن 





ولا ننسى أن نغير الارتفاع إلى 2060 للكلاس 20112112 وهو نسخة من 2023113 لمقاس أكبر وقت والحاجة كما في صفحة التعديل. 


ننتقل الآن لصفحة التعديل م1م.01» وسيكون الكود كما في الصورة : 


لإعماماع ال ل ٠‏ 0005 
اتلك ت 160و اإطووة 2 00967 :2 ع اا8 لا 


ع .0 م طاععغ]. ثانالا نالا 











الجزء الأول : 


ترطام 2 > 

("صطح. ودتخصمع/ . . مر . ") ععده_علتدالعصد 
((182'1)جنا ' | 5_2051) ع155) 11 

1 


ع 25 


رك 


"510 5 > 511 
[ 'مهعط ' ] 2053_وحمدعطج 
: ['ععق '] 20851 _قعوعل؟ 


ابرق 


-_ 
1 
1 


عاطقةع عطء 1205ع 15 ننا “ / 
("10-51 لالظلا ' ع0 "لطع , ' لنقعطة ' تمدع 518:1 للطعط كالظقناكلا") باعدعناكت_لو دومح 0 1 دادع 5 


عطح . ج1231 15 1 ,23ت نات 12 . هج :15م 03 فطع مع و7اعجعمع 1زلمهصط ىر 
("”صطم . 12022 ننه 1 طاشقمعصاة" )] عع هما 

َ 

2 

ترطامر 2 > 

1ن سوعط 134 معطمو ىر 

[211"1204"1ت_؟ - 5104 


3 32 اتا 21طقج تطغ طع 1ه 555515504 وقعهة4ك وصتععم لمعه ىر / 
(13-25327 عع معام نالع برمعع م عات 5212 " ) باعدعناقك _ 1ن دوس ذا ل تادعم تج 


( (5225111) 37ق ع ة3ق_طع ع2 _1نث بتمسحتدمع 5 ) 12 قطم 
1 
[ " قت قط ' ] ومع 5 > نومزاع 
[ " عع ' ] بومعة - عل 5 
/ 
-2 
11011 
2831112 /,>تعديل البياتات4515182*» 
"دودح عمج "اعم ورييع "اعم موده 1ع 5 "دضع "وق . تسمه “مدع /. . "2-7 وعط 1111 > 
<0ه 15> 
</ "2-8 ص عات مع قلطت : لقت ط رمع "احج ورت وتومه ‏ "وري 1 - صم اق عط مدت "0-7 اوت ترط طك 65 8ه 
3د عض ار > 


قن 


7 لى] 
خم 26 


81 





5 
0-7 إزرك) 


الجزء الثاني: 


<017م0ط> 36 
<”" 0122نكشة "”-5 135 01> 357 
<3/> الرئيسية<"ططم. م2262-7120 23> | لك 
< /رعدط>< /عدط> | حك 
<””7->22ن 361 "7”2057->1211001 212 "” 1ت 20 ” -23116 120211 > 40 
<"0"اجعع نعط 216ق6> 41 
2112 42 
<50:/> اسم القائمة<0<> 23 
<20> 
<0ج /> <'"<30:229ع5528 صمطعه [ترطن2 > ' -ع731112 "5630"-23116 "جعده "06-7 6تام2 13> 

<52 / > 
22> 47 
<50 /> التقاصيل<20> 48 
49 
<0/> <3ع2 نجعرزعج /><92 :5062 قطعه وطن ><" "جو جوع "407"-53 1م "23116-7"0667 6123283 502<4>4> 50 
<2ع /> 51 
دح ا ع 
5-39 
<0ع / > <'<105[229'] 5_1 صمطعه «طروطط2> ' -ع732111 "107”-ع23212 "23100627" عا انام 20<>1> 54 
<20/><" تحديث"”-731116 "23116-71120386 "7 115ناطنا5 6126-7 1185م 50<21> 55 
<2ج /> 56 
<22212 / > | ات 
<201211 / > | 21ت 
<0137 / > | كلد 
<0017ط/ > | افك 
<251231/ > | ان 





لا جديد في الأكواد وكلها مكررة وبنفس الطريقة وحسب ما تعلمناها مسبقا. 


: 0-0 ”م /00967 :ع اا ١/08‏ 
ع .0 م طاععغ]. ثانالا نالا 





اتلك ت 160و اإطووة ا 0 0 10000 


نأتي لصفحة الحذف ا[م.ع])1616) 





حرطامر 2 > 
211 12ت تدم 52 3طقوع هك عغطء 1101364 1ت 1 “ر/ 
("قطحخ . قي د لدمع/ . . م . . "")] 12111012 


121 تمعد قعمة فطع 2ه 11 يصمتع طمن ر/ 
]5 5 - 514 


2 كر 88 45 رك اوه فد 


212ةع ممع #امع قلط ومدعه 1 مل رار : 
( "103-514 2122م تتطاعهد 120011 1 1ظماظانا") ادع ناكت_1هو هد تسح ط 1نادع2 5 زنك 


11 

(ططم . عد 120 ) 02هم :153م3 01 فطع مع وسنتعععع2 01هص2 ىر 11 
( "”صطمع . 12023 : دنه دعتقع صا" ) عع مدعلا 12 

ع2 13 


عمل صفحة [1م.<:1206 داخل المجلد :201 والتي ستكون لوحة التحكم الخاصة بمدير الموقع ومنها يصل المدير الى صفحات القائمة والأخبار 
وغيرها للتعديل والحذف وتتكون من روابط فقط وسيكون الكود كالتالي : 




















ع ع1 لمعل ممم عؤدنا عمدلخ ‏ - 
علعامة عاط :ادم قارط بآ متتصلمة لل 
عهامة عاك ١7ب‏ م 715/75 عى لل 
]عام عا نرت اط ينا ناكم لل 
ععهام عاس ان1*م 15م دتمعم لل 
]عام عا الطناءم تابط 1١1‏ لوحت لله 
118 م5 ملام 7,75 م 715/375 لمم | 
الكود 1 
جتمدع 11> 3 
جم "2-8 ع 1إحمم عنتقت : لتتطط رع سمج "عورم رمم "7ر1 طق نود" 1 ماوق ترط طط قع قتع 4 
<1211512/,>نوحة التحكم بالهموقع<51512- | ]ا 
دم "دوت رعاعرم ع حم ورين اام 8 مه 5211 "7 ادهع "مقن . تسمه “ردوع 2-7 128 13211 > 5 
<مدعط م | 0 
اعرااء ساءات 
<<" 3 لسمقة ” -5 155 2017 


<01757/»>فرحيا لك قي لوحة التحكم [| روات التكتولوجيا<"ط"-1355ه 01> 


د عطةه د عطةي 

جة/» الأحعيا ر<"#"ع-2عغعط دع || جق/م» القائهة<"صرطح . 120 /ربتمطعم"- 17ععط ودع 
حدر عطدطة» 

<8/» فدراء الموقع <"#"-2غغعط ته |[ ]| <ق/» القددمات <"#"الل1عطط وي 


دم عرطعدة/ر حرطب 
1 ره 
تيتقصط رع 





ربطنا القائمة بالملف [[م.1206:2 الذي بداخل المجلد 221 وهو الخاص بالقائمة وهو الذي أنشأناه وسيكون شكل الصفحة كما في الصورة: 


القائمة || الأخيار 
الخدمات_| | منراء الموقع 


لإعمام ءال ل ٠‏ 0000 
خوك ت 161و اإطووة 2 00967 :2 ع اا8 ١/0‏ 


ع .0 م طاععغ]. ثانالا نالا 





نقوم الان بعمل الصفحات اللازمة لجدول الأخبار 12©1595 : 
نقوم بعمل صفحة الادخال «رطام.غ125©1 والصفحة التي تقوم بالعملية «ام.55ع1:0م_15©76 بنفس طريقة عمل ملفات الجدول 121211 : 
صفحة برإدام.]125©1 : 


11530 

د/ "62-8 1احتعاع دع قلطت : اللاعاط دمع "جتن رمج رمت "موب 6-1 نم ع ندم" - 1 ناوه تررطا اط عا 12> 
<81212/,>مقحة إدخال يياتات الأحيار<212516>» 

دث/ر "دوحج رومع "اعمورياط اعم مروت تعقو "جح لمع "كقص , تتسمقت “ردقع ثر. . "ادع ومموط 13111 > 

2ك عط > 

<تتتقصطه» 

2<" 2 1انسمعة ” -5 1535 203 


<01/> إدخال يبياتات الأخيار <"ط"-1355ت 03> 
ج/, عطعد/ عطه» 
2013 
:2051" -100نا 11 "ططام . ققعت0طم_ماعطع 125" -10121 غ31 10111 > 
حدم عدطه> : العتوان 
در عوطت" ام-2 رمم "اعجرم ع" حم و 1115 1 > 
</م عط» :التاريم 
حج/ عرطه<5 "22 خ ز"ل “سرلا -1") 3262 صطعهت حربطمة >" م1 ردج 7م68 هن" عدم رمم "عيرم" حمر 21115 1 > 


د ع*ط» :التقاصيل 

223 تق عجرم ع رهد " زاك "عع رمم "7 7 "جم وروم "7جم ل 5172-7 دع ط5قطهزهت »> 
د/ر عدطه» 

<<-__قلظ"”- 751116 ”غ1 تسطناك "اموي 11111 > 

تلط وظ > 

11 ره 

تل صط رجه 

< لقتط اا ره 





الجديد في الصفحة السابقة أضفنا التاريخ من خلال كود ام وسيتم ظهورة بشكل اتوماتيكي وستكون الصورة كما في الصفحة : 


5-5 نف 1 7 0 « بنع خضي 70 ملام مااع كص كنلا 5/0 2001 /اءعء زه10م/أدهطاهةء0| ذا | 8 جه ©» 


إدخال سانات الاخبار 


العتوات: 
رواد التكنولوجيا يقيم دورة تدريبية 


التاريخ: 
1250317-09 
التفاصيل: 











: 0 00967 :ع اا8 0لا 
ع .0 م طاععغ]. ثانالا نالا 





اتاو »وات 00 6زوا الضيوة 2 /0096 :2 ع اا8 0لا 




















صفحة «رطام.ودء1251"]_2100 : 


<21212/,> عملية ادخال البياتات2151685> 

دمر "دعوت ريرم جح "احم ريع اعمم لدت زياع هع "عت رمع "عقن , تسمه “دمع ”ر. . "2-7 وعم 13111 
220 > 

مط > 

<113”2نققة5 5-7 155 2035 

الزتاجر 2 جه 

("”ططمح . 2192 دمع / . . # . . "] 12111032 


'تمدعط '] 5_2051 حمدعطج 
[ "عطعهك ' ] 2053 _5 حمع وق 50 
[ "اع ' ] 180513 _وحباع 0ج 


ع" ر('عع0 5 ' , " ع6قهك ' , " لمدعطة ' ) واظلائلتض؟ إ(عع0 , عع2قك, 52خ جاعم 11110 121525581 "51-1 5 


( (5591 متامح 5)] تانتعناق_ 375913 ! ) 112 
1 
( (صمجع5) عمععع _411 15 ٠‏ " ت2وعع2 2012-1 
/ 
"تهت الاضاقة يتجاح" قطعع 
"<3/»#عودة للورئيسية< انطم. 0م11 / . . "ع2 ععط وه" ملطعع 
(صسمع5) 13ت _11ي 5ك تقس 


)| 4 3297 و 


زه فد 


)| اط)| طم طم اشع اطع اطع طخ )| طن 





«0 


نقوم بعمل صفحة عرض البيانات هي [1م.:101 داخل مجلد 226185 وسيكون الكود كما في الصورة : 


تتتادرة > 
("صطح . و دخدمع /. . “ . . "| لتم د 


1 كن 21 


("'ثاكظ 1 835 الاطللظطن كجماعم مم م اناظماظ5 " ) باع ناك _ل1ني 5 نتسح ط 1نادع ع 5 
عت 





0 رف 


< لتتاعا 1 > 

<ع2311/» الأحبا ر 518122>» 

2" تقح ار ومع "اعم ورت لمت مت نا 5" > ضع "55ج . 1 تتتقة “رقع “ري , "عع صعرم 11 11> 

112 001 

كر "28خ 11حتط تم ونتقطت ‏ : لظ رع عجعج "ع مورت عتومه "قوري 1ط انق م طم "5-7 11امقة دورط قطاقنتهع 
0د ه11 ره 

لعراوء سداق 

<<" 22 1نتمققة 5-7 55 1ت 2035 

< لعاطع- رطع دق /#» إضاقة جديدح "طم . امع مم1 لمعل هوي 

متطاصرة > 


"امع قر رردع > 3ن 5131 تاج م عمط 105١‏ ' خطع 1 5 الطوعة#>"" قغط0اعكت 
"00301 "عجرن 1لوعوط ع5 #4" ملطعه 

""<0عا/مر» العتوان<#20>" صمطعع 

: "'<60/» التاربيخ<60»" قطاعع 

"تلمع /ر»: قاصيل<20>"" قطعع 

"احاواع “ر»تعديل جم >" مط©طاعع 

ع "رعرع “ري "1 فطاعم 


4 (1528تم حح 111 وروعج 5 ) 11 
126 للمفصقط «امعاعدع ععططاعط :1010 // 2 (() عمععع_لودتتس) 0313 

0 د 
1 ((3111ع52 12317 طد3ق_طععاع77501_2م - متمد 5) ع1 قله ل أثنت 
"اجعرع] ةي" ملاعم 20 
م ""جللعط ”ر >" . [ " مدعط ' ] متمعد5 , "أجلع ه"” مطععه 31 
"اطمط >" , [ "عطقك ' ] ومع , "اجلم >" مل©طعم 32 
"الطقص ره" , [ "عمق ' ] تمعد , "أجلع ه"” مط؟طعه 33 
"جلما لعجو /ر»#عدةف“< ' [10] مامع 101-25 صرطع . 081212 ' معط 9ه [ جوم تعديلت< ' [10] ممع 2101-5 صرطم . ادمع ' لمعم ومطللينة" مومع 34 
/ 35 
"27م اطوع ره" مطعع | ا كشك 
ع 2 
<017 رج | 0ت 





لإعمام ءال ل ٠‏ 0005 
اتلك كت 61و اإطووة 2 00967 :2 ع اا8 لا 


1ع .0 أم لاععغ]. ثانالا نالا 





5666 


بنفس الآلية في الادخال الخاص بال01ه»1م مع تعديل بسيط اسماء الأعمدة واسم قاعدة البيانات وتعديل بسيط على جدول العرض وسيكون شكل 
الصفحة كما في الصورة : 


9 ل« + له م؟ محاصءاء 0ص أ/كيقاع 5/0 01ل 3 //اعع زمرم/أدهطاقء10 لأ 


العنوان التاريخ تفاصيل تعديل 


رواد التكنولوجيا يقيم دورة تدريبية 2014/04/29-/إ116503 تفاصيل حول الدورة التدريبية هنا تعديل | حذف 
رواد التكنولوحيا يقيم دورة تدريبية 0388 تفاصيل حول دورة المواقع .. تعديل | حذق 





نقوم بعمل صفحة التعديل :1[م.0111» وسيكون الكود كما في الصورة : 


الجزء الأول : 





نرتاطرة > 1 

( "ططم. و 1غخطمع/ . . م . . ") ععنه_ع0 تاعمد 2 

((['22ه2صنا' ] 5_2051) عع15335) 12 || ك 

4 1 

5 

3 5104 - © 17 

[ "مقهعط ' ] 2051 _وح م دعطة 11 

[ " عطقك ' ] 2053 _وحع 5086 : 

'غع0 '] 2051 _#دوعلة 9 
0 
12طقةع عطع 1ع لمن “ا / 11 
( 10-518 5185ل ' م50 '"عمعل , ' عنهك5 "جع نول , " لقغطة ' تمدع 511 22175 83115نا121") باعدعنك _ 1ن دتتسح نا 1نادعء» 5 12 
1 
وطح . 12013 15 16 ,هت عتتناه 12 .هم 1535م5 03 فطع مع و3طعه2 ننعع رار 1 
( "”صطم . 1202 :2ه طاشعمة" ) عرع همعط 15 
/ 1 
عل 17 
حتتاحرة > 1 


نا تتصعدطة 131 055355 رار 159 
1[ "12" ] 1ظنا_ج > 5103 الات 


3 1522نت 21ط2قم 3ققطع ط6 1 53555155034 ه345 وممتععه لمعه رار -_ 
( "13-51 معم طم كجتمم برمدعع م عات 5212 "" ] تمدع ناك _ 1ن قرم ط لنادع ند 5 عر 


ا 

((52251112] بتقععة طععاع2 551 تتحجمومع 5 ) 52112 | كنت 
1 1 | 2 

[ " متفطظ ' ] جمع 5 > نودعمزداة 2 

[ " عع2 هك ' ] تامع 5 ع مولن 5 25 

[ "عمق " ] بومع5ة ع اعملل 5 2 

3 / 

ع2 5-51 

32 11101 

<212512/»>تعديل البياتات5ءع11خ2 | دح 

"دوج عبرم الحم راع لعم تم مدت راع صق "تامع "تقح . 1 تتستده “رددح #ر . . "ع2 معط 112 11 > 34 
30 115 > -5ِ 


: 0-0 ”م /00967 :ع اا ١/08‏ 
ع .0 م طاععغ]. ثانالا نالا 


اتلك ت 160و اإطووة 2 00967 :2 ع اا8 لا 





51 


الجزء الثاني : 





تتدعط رع ا 20 
<ةتاقصط» 38 
<” 2112 تنقعة "” -5 1335م 20135 ا 
<3 / »> الرئيسية< "وطح . 12 "17-7 عع وج لل أقك 
< اعتطعد حرط 0 اند 
<<" "ترون 50121 "3 ووجع" -01 105 11:2 " 1انتتت 2 251112-33 101211 > 12 
<") "اسع عوط 83152 
دللاما > 
<2580 “> العتو ان<60>» 
1202 > 
اعاء ارات < "22 ع مدعط5 صمطعه حرطم »> ' -112 دج "مدع" ع م رمم "طويرم ب "حمر 21115 1 > 
<12 جا ره 
ءاه 
<580/> التاروبخ<0»>» 
حو ناما > 
02 ثر > <2231 ع 532 مطعهت حرطج2 > ' -15 ردج "مع من" عدم رمم "ارمع "عم و 1115 > 
اعد اك 
للاعا ‏ 56 
<58/ »> التقاصيل<03> 1 
58 
حقج “ره تممص م عجرم “ع2 معع50 صطعهة حرطمرة عد " "اجو ووم 7ف "حم رمم "اعمن "7 عم رمم ودع مع يرمع من ارا > 59 
<12 جا ره نام 
لاما > 51 
52 
01 ره <"<104"1[227' ] 1ئظتا_5 قطعه صطاص2 > "' تمن 1 هم 107" عتم رمم "7م51" عتم ريت عأاتامرت 1 12-2 > 6538 
هايا “ر >2" تحديت”-7731112 "5081:2نة”-223112 "نا لسطددع "7 -2 ج17 لم12 عدلانا > 54 
1122 > 55 
جه 1طد 2 / > ١‏ شك 
1001-11 “رج | زم 
7/01 | 220 
دتالصط ار > | كاد 
<231اط/ > | 3م 
وستكون صفحه التعديل كما في الصورة: 
9 «ا خخ خضي مب 70-1 مطم أ لع دباع م/م حم له /ياعء زموم/أوهطاوءو| 5] | ١‏ 


رواد التكنولوجيا يقيم دورة تدريبية 


108503/-2014/04/29(  خيراتلا‎ 


صيل حول الدورة التدزييية هعتا 





: 0-0 ”م /00967 :ع اا ١/08‏ 
ع .0 م طاععغ]. ثانالا نالا 





اتلك ت 160و اإطووة ا 0 0 10000 


نقوم الان بعمل صفحة [[م.ع)»161 للجدول 126585 وسيكون الكود مشابه تماما للجدول 2101 مع تعديل بسيط وسيكون الكود : 


انتطامر” > 
211 6152 تدم 3528 8طقع 345 غطع 1211035650 / /, 
("صطح . 10 رمعم . . “ر. . **) 1211101 


شن 0ت 


ف إرفق 


1121 للتمعط 8ع2ه0ن عغطع كله 134 ودط1عاعاعن ر/ 
7 ]55 © - 510 


5 
2 
ا 


عالطقع تمع تامع قطع وصدعت 1م ىر 
("10-510 عععطهم 5اعم 2011 115 ظآ كنا" ) يعدت _1ن قمتتسحط 1نادععدة 


إصمه | إس || سح 


فم قم قم فم فم 


طم . د10 ) 2قهم تثقل1لصة 03 فطع مع مصتععه2 تمدع “ىر 
(""”صطح . 120152 ته 1 طاتقعصة" ) عدم مهمد 
2 





كر 5 321 


نقوم الان بربط صفحة [1م.1:016:2 الموجودة في المجلد 26175 مع الصفحة 1206.017 في المجلد :201211 وسيكون الكود بعد وضع الرابط كما في 
الصورة : 
0 صمطةه 


122 سقس " -5 1535 203117 
<015,>مرحيا لك قي لوحة التحكم || رواد التكتولوجيا<"ط"-1355- 01> 


ع ا(« اس 


كم 


در اعطه در عط» 

طة/ > الأحعسبا رخ" تطخ . عع 0ط 1 / ممعم" 2-2 عط 23> [|] «جة,» القائهة <""جرطام . 121022 “ريمتدعم"- معط وي 
ج/اعطة» 

حته/رع مدراء الموقع <"#"-7عخط دع || حو/» القغددمات جح" "معط وي 


خش 851 35 


در ععرطعد/ر عرطهة 
:175 ره 
مط ره 





كما نلاحظ ربط صفحة الأخبار في سطر ١7‏ . 


ننتقل الان للجدول 5©17 والخاص بالخدمات في مجلد هو وبنفس طريقة عمل الجداول السابقة» نبدأ بعمل صفحة الادخال م11م.)1125©1 وسيكون 
الكود الخاص بها كما في الصورة: 


مام )ءع1]5 


دم "2-8 ع 1حتعم ومتقطع 2 701ع لط رع ومع "عجم ووم ورمع "لعوربن 1 ع ندع نحدت " حم 1 اوم سورع عط تعره 
7/2121 > مقحة إدخال يبعاتانفه الخدمات<: 2511212 

دمر "نقح يرمع ""عمورييع "نمم رطمم ابا "هع "55ج . تتفت “رددع /. . "عع معط 12111 > 
تمدص ١ط‏ ري 

لعرااء ساءاق 

2< 2 لسقة ” -5 535 1ت 203 


رك رت فد ني 


سال كه 


<0315/»> إدخال يبياتات الخدمات <"ط"-133535ه 01> 
و/ر عطعد ر عرط»> 
2011 
"2051 " -ل0 1105 212 "بخبطاح . 5 قعصوطم_ماعع 1125" 1ه "7ع تت حتتطدت 2 “رع 12 تج 121 1نتنم" عدم وري ع ره دامع هه 
حم *ط» :العتوان 

</, عطه <<" لدع" عم رمم "ووم "مر 2111 1 > 

د/ عدط» :الصورة 

</ عدط>< 1217 "7 -2 من "2117 "7م و 115 1 > 


- 


</, #ط» : التقاصيل 

3ع 2 شق عجرت بج “5 ” زك "احم روم "77" عم بووع ‏ "جم "7 مم دمع معهعره 6ه 
جدث/ر عطع» 

<<" ح__قلطظ"-115 71 "2 لتتطناع "منت خا 22 1 > 

2112 م2 »> 

01 ره 

مط ره 

1قع اا ره 


ده "!ا 7د ل 


45 نك 





2 حن كن كن كن اسن كن كن كن 
كن 


لزن قت 


: 0 00967 :ع اا8 0لا 
1ع .0 م لاععغ]. ثانالا نالا 


اتلوافك» لوكت 1ت سار للصيية 2 /0096 :2 ا اا8 ١/0‏ 





حا مرحام رع كص ]بعك / رصاحم لقايعع زمام/بأكهمطاقعه| ذلا إ| 
دخال ساتات الخدمات 


العنوات: 


سسا 


الصورة: 


عاط ععمصلانا | مع عصراع عاز صلخ 


التفقاصيل: 





صفحة عملية الادخال «رطام.ودءع1:0م_]125©1 : 


>00 372 

2372 لتقاقق "5-7 35 رت 203137 

الزلاجرة هه 

(""”ططم . 132 لدمع/ . . “ى . . "1 ) 1111012 

"5 ةر . . #ر. ."3 2ت امي 12ت ا 5 

([ 'عتتقد ' ] [ ' وطنة '" ] 15 5_1 ) عشتدمع دقط . أعوصدع5 - اأعو2 د 5 


'0هعظ ' ] 5_2051 تمع م واه 
([ ' عتتهع ' ] [ ' ود ' ] 111:5 _5) عتمسدة 
[ "106 2051_وحوعع 50 


خ" "5082 ' , "7 203دش " , " لدمغطة ' ) د ظلائلق* (ع042, 215ة ,م 2دعط) جعت 11110 55951-11155141 


( (525233521 ,[ 'علتتقط_جهخ ' ] [ ' يسد ' ] 511:15 _5) 155080_2112جنا_ع بدمم) 11 
1[ 2"" صقطعهت ) 


مقلع 
1 
"لم يتم رقع الهسلق ..هتاك مشكلة" قطعع 


( (5591 ,تمت 5) تاعدعنات_11هج قتتنه! 1 11 
1 
( (ضمجى5) مدع _411 5ه . " :لم تتم الاضاقة ")01-1 
0 

"تمت الاضاقة يتجاح" قطمعع 

"اتعوة" مامه 


"32 /,ر»#عودة للورئيسية< 'ترطحن. 1502 م . . اعتومعرع وع" مطعع 
: (طمع5) 155 _011 5ه 

ع2 

>11 





العرا مه هزه ال 


لا جديد فيما تعلمناه سابقا نفس الاكواد المشروحة من قبل . نقوم الان بعمل صفحة العرض وفيها يتم عرض البيانات المدخلة في جدول 5©17 واضافة 
روابط التعديل والحذف. 


لإعماماع ال ل ٠‏ 0005 
اتلك ت 160و اإطووة 2 00967 :2 ع اا8 لا 


1ع .0 أم لاععغ]. ننانانا نالا 





صفحة «رام.12016:2 : 


2 نض غ1 7 80 ل« بخ 8 مب /لحاع كص أحولق/عع زمءم/أدهطاةءه! ذا 
ضافة جديد 


رواد التكنولوجيا يقيم دورة تدريبية |" - 5 . رواد التكنولوجيا يقيم دورة تذريبية رواد التكنولوجيا يقيم دورة تدريبية تعديل | حذقف 


رواد التكتولوجيا يقيم دورة تدريبية 2 رواد التكنولوجيا يقيم دورة تدريبية 2 رواد التكنولوجيا يقيم دورة تدريبية 2 تعديل | حذف 





كود الصفحة «وطام.12016:2 : 


21212 القدمات<2512815ه 

"عون ارعيرم ع اعم ورياع امم زروت راع 8 "ج مضع "ممص . 1 تتققت “رد قح ث“ر. , "عع مر 13112 > 
11530 

</,ر "2-87 1حعم وتتقطء ‏ : لتتعط رععرمع "عت ورت طأوورمه ‏ "موي 1- ص وت ع ند "1-7 ناوه سووططط مغاع ده 
0ش عار »> 

لعراياء هادا 

2" 22 نسعه "5-7 1535 20311 

< لطع عط دق /> إفضاقة حديد<"وطم. ادع مم1" <1عغط وي 

بررادرة به 


"اعتعر مر اردع حون 511 تاأحع ملمعمط "135 ' خطع 1ج ده الطمع 2ه" مقط©طعه 
"1 203 ا عجرن 1وعوط عع 4ع" مطحم 

""<لاعا مر العتو ان<120>ه" مطعع 

"<20 /,»> الصور 5 <20 >" قطعع 

""<0 م »تقا صبيل<4120>"" مطعع 

"1<لع /ر»تعديل20<2»" مطعهة 

"اوعري ره" مل9طعه 


1س 
ايد 


ا 

+ (521.57 حت [ورو مرج | ع د | ارم 

150 لالققط عوععهء «ععناعع5 :1010 // 2( ()عوععع_لوقتتس) 1ك 0 

د 

؟ ( (5225111) لاقععة_طععاع 2 _1نوديتدس - تمع 5) 3112م لد 

"اوعر يه" وورعة لا 

ع "اخلط رع" . [ " فقدعط ' ] ومع 5 , "7جم2 ةي" ملطعع 31 

"تعر" . 310”23 137 "12821-7"'0ق 521 " . [ " تطند ' ] تمع 5 . " “,5 قطلد ” . . #. . جعع ع يمسدع " , "7ج >" ملاعم 32 
"الجاع رخ" . [ "امك ' ] تمع 5 , "اجام >" م؟©طعه 533 

"عا ”عه /» عدف < " [10] امع 10-2 2 رطم . 22 1مك ' ع-1قغط 5ه | <قة/ 2 تعديل: ' [10] امع 10-5 2 رطم . دمع ١‏ حترمعم وعجل >" قطعع 534 
0 5-5 

"7< اطوع “رع" مطعم 36 

ع 37 

<017 رج اامعكت 

تبتمقصط رع ل كات 

خلنط رج | الاك 





نقوم بإضافة الصفحة [م.:©10 الموجودة في مجلد 5677 مع الصفحة الرئيسية للمجلد 201212 (لوحة التحكم) كما في سطر ١١‏ حسب الصورة: 


جر عطه «</ر عطهة» 

<3/>» الأحعبار "ططخ . 20 1 /ر متمد" ع2 عصرم تع [| جة/2» القائهسة< " ترتام . 121:12 “متطعهم" 2 ممعم ودعي 
د/ ا غعطة>» 

حهق/» فدراء الموقع <"#"-1عخط هه || حق/» الخقدات <"صطم . عع مم1 رومع "دمع وي 


</ر عطعد/,ر عرطةه 


11 رجه 
مط رج 
11101 ره 


2 5 2 


0 كين 





,5 0-0“ /00967 :ع |ا8 ١/0‏ 
أع .0 م طاععغ]. ثانالا نالا 





احلوك 1 ت 4100و [إطووة ا 0 00 ا 1000 





ننتقل لعمل صفحة التعديل والحذف 1م.1116»© : 


الجزء الاول : 


الجزء الثاني : 


ع .0 م طاععغ]. ثانالا نالا 


ملتامرة > 

("”ططم . و 1دخصمع “م . . “ى. . ") ععده_علت1جعسة1 
(1'ع02صن ' ] 5_20531) غ155 11 

1 


0 (طخ| 26 


4 رك 


للق 


]555 5 - 1ه 
[ "معط ' ] 2051 _5و مدعطج 
[ 'يسدذ '] 2051 _5-هممدة 
[ 'طع0 ١]2053_#حاع‏ 5 


د 
1 
1 


قل1طةع فطع ونتع مدصنا ار 
("10-5313 لظلا "5022 ا جباع0 , " قدي ' -تومنة , " لدعطة ' لمع 581 27ع35 5118ا2!") تاعدعنك_41و5 دك ل 1نادع12 5 


. قلقم تثقللم5 3 قلع مع وتععمع تمدع “رار 
(""”"عطح . 12022 :لات ا ماتاهمعصة" ) عرم مه عط 


معطم . 120635 15 16 م5328هه عتنات 110ل 
َ 

2 

ترتامر 2 > 

1عتنا سسصحعدة 314 مسصستعععن /ر/ر 

1]'107ظه5_ 5 - 14 


23 عقلتت عطقم 5 تطغ طع دم 362834 وزعم5 55 قمع هك ومصتععمه رمد ىر 
("27 21-251 مع عظام حرمت وبرمعع م عات 5212 " ) بطع نا _1نو هس تتستنا 111دع< 5 


( (التاقع52) تلاقططة_طعطاع2_لو م وتسحتهمع 5 ) 11طم 


6 


8 1 

[ "تمدعطظ ' ] بسومع ه > لودعدطة 27 

[ " تسد ' ] تجمع 5 > نسدد 5 28 

م [ "عع ' ] بسومعة - خملل 5ه مم 

/ لا 

ع2 351 

لعل سا فى 32 

<21212/»تعديل البياتاتت5ع121ج> | غاء 


"دوجت رومع لحم ورات "امم رطمت 1باع ص "هع "قت . 51 تتققت “رددح # . , 2-7 معرط 11511 > 
0ت 115 > 


تن 
0 رس 


3 





زمر "2-8 نات وعت قلطت : اطاط رومع "عن ورمع رمه "مور 11ت ع مدت 5-7 11ان مسوصرطاطط 8ه 
1ت 5ط ار 

7 مضا > 

<"” 22 تسشقة ”5-7 55 1ه 2013 

<3/ > الرئيسية ><" 7ترتاح . م10 "7 عع وي 


د 
زه فد 


2 )| 26 
| "ا 0 


صن ا 


< اطع رحر”رط» ١‏ الناد 
<<" "احترون 1 م 5 "نوج" 1ن لع 11:2 " لنتعت2 "-21511152 2031211 > 4 
<" ا ”حعرع لعروخم عاطم اه 
2 ما > 
<20/» العتو ان ختانا» 
اما > 
عاد راف 221 ع لمدعطة صمطعه حرطم »> ' -15 1 دج "لدم" عدم رمم "ععرمع "7 حدم ويتن اتات 1 > 
1122 ار > 
لاما به 
<0ع / > امفتدات الصورة<0<> 
1ع > 
02 ار > < "222 53032 صطعهت حربطد” »> ' -115 1 تج "مع من "عم رمم "ورمع "عدم و 115 1 > 
12 > 
د لاما > 


<120 ,»> التقاصبل<503> 


قط ره توه طم طجرمح “ه25 مم50 صمطعهة ترطاطرة هد" 7 ""تعوووزومع ‏ 7( ةق" عمج رمج "من" ع م رمم ممع مع جرم مت لاما ع 
1222 ره 
د لدعا > 
< "222 [1]'10431ظم_ه عطعه ناص ه ' -18 7251 "7313 حم رمم "ع3 51" ع مو مانام 0121م > 
<0 ,><" :_جحديت"-7751112 "ع هنون" دعقم "2 تسطتدع "عد صيةع عناصم 1 دلا 
122 ره 
<2 321 ا /ر > 
20111 ارج 
01177 ارج 
تح صط ار > 
1ع ل ره 


1ع ”رجه 


أله انرس 
07 82 رف ارس 


- 


إلزه لزت الزن ” 





الك 
ل ا« 


0 /00967 :ع ااا 





خوك ت 14و [إعووة 


2 /0096 :2 ع اا8 0 


"١ 
: وستكون كما في الصورة‎ 


27> © +« عن تي مب 70-7 مام لع /بحمع كرو حول ق/يعء زموم/أوهطاقءه| ذا 


الرئيسية 


العنوان رواد التكنولوجيا يقيم دورة تدريبية | 


امتداد الصورة 007[ 


رواد التكتولوجيا يقيم دورة تدريبيية رواد 
التكتولوجيا يقيم دورة تدريبية 











صفحة الحذف «رام.ء)©0161 : 


امزتادر ب 
2112 تماوعت عضصدمه مققطةع 5ك عطع 121-1111335 ىر / 
- ("صطح . 13 دمع / . . م . . "3 13-2111031 


كر 20 


ك1 رق 


1ن للتمصع 2 قع قن فطع 2ه 11 قنمةعط من رم 
]1 ؟ 511 


5 


28212 اقمع امع فطع ومصضدعه 1ع ر/ 
("10-510 عععطه ع5 2011 111115ن1") تاععناك_1لن 5تتسحتنا ل نادععدة 


(منطح . د12 1 ممم :155م5 43 قغطعط مع متسمتعععمع تممع رار 
(""قطخ . 120123 : نت 1 متقع صا" ) عدم ممم 
2 





ننتقل للجدول :201111111 والذي سيحوي اسماء مدراء الموقع وكلمات المرور الخاص بهم وفي هذه الخطوة سننفذ نفس خطوات ال و2»00[6 والاضافة 
الجديدة هنا كيف نقوم بمقارنة كلمة المرور المدخلة مع كلمة المرور في قاعدة البيانات» ايضا ستكون كلمة المرور في قاعدة البيانات مشفرة بواسطة 
خوارزمية التشفير (711(5) حيث تقوم بتشفير أي كلمة مرور من باب الحماية وعدم معرفة كلمة المرور المشفرة. 


بداية ستكون ملفات المجلد :2)::11 كما في الصورة: 


رع لعادة معلا نا * لااايا عرقطك * بمووطاةا ١‏ 


8-5 


خسرت حلا مع صصص عذونا مول" 

ع عادة عاط 17+ م + أارت+ 11 ١‏ 1 سلنيتكت لك 

معهامة عاك امم 51 عى للا 

معام عاط م درا يآ لالع كم لل 

تعلهامة عام نمم 51 كبمعم لل 

تعهام؟ عاك ا#ن1ءدم ”15م ممع لل 

18 أمع5 نرم 1 ملطء رق 1117 ا ا 
كه أمع5 نرم 1117 م "+ 1+1 مأوما :5 
18 أملحة منرم 171 م أدكبا+ /1 ١‏ ؟ أناموها 5 


لإعماماع ال ل ٠‏ 0005 
اتلك ت 160و اإطووة 2 00967 :2 ع اا8 لا 


ع .0 م طاععغ]. ثانالا نالا 




















كما في الصورة أعلاه في المجلد «رزدم)ج وضعنا صفحات (م1م.1050111 - «طم.درزع10 - «طم.016نة) ومهام كل صفحة كالتالي: 
صفحة م.1201 : صفحة الدخول وسيكون فيها فورم الدخول. 
صفحة م«1م.درزع10 : صفحة يتم فيها مقارنة كلمة المرور مع كلمة المرور في قاعدة البيانات بالإضافة للروابط لملفات وصفحات اضافة البيانات. 


صفحة طام.0014ع10 : صفحة يتم فيها تسجيل الاخروج والغاء الكوكيز وتصريح الدخول للوحة التحكم. 


صفحة «رنام. 1101 


<<" 701عتطعع “1999 “ريوعده . 73 . معد / “ر : ترط عط" -5 2 لطن لاطي 
ممت 15 > 
دث/ر "12-87 جاع و تقلطت : لاط ارعاعرعع "حتت ورت وارمه ‏ " معوري1- 6 رم نرنره2 "5-7 1 ناوه سورع 1 تعاعلت» 
<512512/,>لوحة التحكم بالهوقع<51512> 
دم "ونوج ريرم تج احم ورا م تم مت 1 5 "ع 1مع "مقت . 5 لتنققة “ودح "2-7 مصعم 511 11> 
0 115 ار > 
0ن > 
2<" :2 251 :1ت 1 مع 5121715-71 201137 
0211125 جه 
<81/»>تسجيل الدخول<11» 
< "تلاج . 159513 ”حيرت اعت "جنوج" تل صطع 112 2111 10 > 
اسم العستخدم 
<< “ا "1111027 ت 115" قد "عومج "عدم و انام 1 > 
</ عدطه 
كلمهة المهرور 
</ "لل عدن 7ك عمج" -5212 2 " اعد مت كحو" مو 115 1 > 
</ عدطه» 
داكت 
</ "دخحول"-781116 "عا تتاطدادك "6-7 ج63 عالادرت 1> 
20121 ره 
عت 6 قت أر > 
0115 > 
مط ره 
لقع »> 





وسيكون شكل الصفحة كما في الصورة: 


5 5 1 ذف وح 2 كمي جا له كه 2؟ /رمنح ل عع زمزم /أووطاةها ذا "0 جه ©» 


تسجيل الدخول 


اسم المستخدم 
كلمة المرور 














,5 0 00967 :ع اا8 0لا 
1ع .0 م لاععغ]. ثانالا نالا 


اتلوافا» لوكت 1ت 6لرا للصيية 2 /00967 :2 ا اا8 ١/0‏ 























؟1١١/‎ 


صفحة «رام.درزع10 





انتلادر 2 > 1 

("عطعع زومعم" ,"" ,"ممع" ر, "1ق مط لهعه1") عع صصم_11هن 5 بومسحصامت 5 2 
( "تتفت 1558011 * 1اظةظ5" ,نادت 5) باع ناك _11هوقتتم > 522511125 4 
(51225111) ه87ق2ط3ت_طحناءع011_2وقتتم - تتمعدج 5 

.د . 15584 111 2011" 511181 1اشك1 123ئنة 1115 11ل“ / 3 

( 250"1ماد مهدج ' ] نمع > ([ "201 مهاد 5هد"] 5_209531) 205 عع ['عظتهط ' ] تمعد ح- [ 'عتتقط :115" ] 5_2053) 11 7 
1 8 

.ا لآل18 5111 لال 1552 11 غ1 للا 1111 لظت رم 9 
(61010 23+ () سدع ,"385" ,"معوصاع 5لا" اع 1طامصع اعقو 1 
0 11 
مولع 12 
1 1 
(""”"صطم . 12022 :ممع قعصاة" ) عدم مهم 11 15 
0 15 
(صطمع5) ع5ه1ه_5411 ته 01 
2 17 
<<" 701ط لعج 9997 1 تروعده . 73 . اوور ثر : قرع عاط" >5 شت تت لتقتط اه 15 


0ق 112 > 15 

دث/ر "2-8 6 و1وحتنعاهم ودع هفطع : اط يعرم ع "عجرم و رمه "7 مون 1 جوت م27 11ان معو طا اط مله ا ل 
دم "دوقح رعاعرم ج احم وان اعم هعزوم ماج 5 "تامع "عقت . 5 [تقمت “رددع 2-7 معط 1 11> | أنص 
<81212/» الدخول للصقحة << ه11-1ج | يت 

لدع “ره 2 

اعرااء هادا 9 

”231 تنققة "5-7 1535 20113 حارس 


<03175/»>مرحيا لك قي لوحة التحكم || رواد التكتولوجيا<"ط"-12383ت 01> 25 

ج/ عطه دم عطهة لاد 

جة/> الأحسسبا رت" طططاط . 12022 / قتاع 2" 2 ععط 53> || جة/> القائهة<"طرطص . عدع1210 رطعم" 2 ععط وه 21 
د/ر عطي ع 

جق/»> ندراء الموقع <"#"-2#قغعط مه || جق/» القغخددمات <"ص7بتطاح . عدع120 رورعع "امعط وي لا 

ج/, عطعد/ عطهة» 31 

<8/> تسجيل الغقروج <"”صطم. أناموه1 "جل27ععط وي 32 

53 > 031 

34 > 031 


مط اع كاك 
في سطر “" الى ه عملية اتصال مع قاعدة البيانات وعملية استعلام واخراج بيانات الجدول (20111112) في سطر ١7‏ قمنا بعمل شرط (1) وداخل الشرط 


قمنا بعمل استيراد اسم المستخدم من خلال دالة '5_2600571 وهي كما في الكود ( [''200571111561122126 4 ) وقمنا بمقارنتها باسم المستخدم في 
قاعدة البيانات (['81:017]221116) ثم اضفنا شرط آخر بواسطة (و) وهي (542) وتعني ((4171) . 


في قاعدة البيانات الباسورد مخزنة بشكل مشفر بواسطة الدالة (711(5) الى الان لم نقم بعملية ادخال الباسورد وكلمة المرور وسنقوم بإضافتها لاحقا . 
بعد الشرط الاول نأتي للشرط الثاني نقوم بتشفير كلمة المرور التي ادخلها المستخدم ونقارنها بكلمة المرور المشفرة كما في الكود 
(['41:017]'095535010 -ت (["2105)9_20051]''035539010) حيث الكود ([''722015)5_1200571]"625591501:01 ) تقوم بتشفير كلمة المرور 
المدخلة من المستخدم ثم مقارنتها اذا كانت تساوي (--) كلمة المرور في قاعدة البيانات للمستخدم (['02553170101' ]951035 ). 


في حالة كانت عملية الادخال ووافق الشرط وكانت كلمة المرور واسم المستخدم موجود في قاعدة البيانات سيتم الدخول في سطر ٠١‏ وهو القيام بتعيين 
كوكيز وبنفس الطريقة التي تعلمناها مسبقا والاستمرار في الكود وظهور روابط صفحات الادخال. في حالة عدم التوافق مع الشرط يتم الدخول للسطر 
١:‏ وسيتم توجيهه مرة اخرى لتسجيل الدخول في صفحة («رطام.:1206). 


١/08 ||: 00967 0 0‏ 
الاكدا أ0.0أم داعع0©1م1 :اأهمع ‏ 772755202 2:00967 || ١/08‏ 





صفحة ام.011ع10 





حتطاح 2 >> 1 
زناناض3ة - (]221102 , "80 " , " 20 وضصباع 155 " ) 5 11 صصص طاع ده - 
( "صطح . 12025 :ت 1 طاتقعمصة" ) عع ه1152 ٌّ 
عل 3 
<<" 27201 طلم “9 19-9 أريو عدت . 73 . ووو كر ر : ضرع اط" 1125م لالط اع 5 
0ق 115 > 5 
دم "2-8 ع 1إجئاع وعم فطع 2 701ط ا رع اعرمع "حم ورم واومه ‏ "و1 6ع عط صم "7-7 1 ناوه دورط 116 10123 1" 
دم "دوج رعاعرمج "اعم ورياه "اع مم وروم راع 5 "ع مع "7 5قت . 51 تنقاق “رددح 2-27 معط 11 131 > : 
<81212/,»تم تسجيل الخروج<ه5151- 1 ك 
تلدع ثر > | ا 
تتقضصط» 11 
الوط رج د ييا 
11-101 “رج | علا 


كما في الصورة أعلاه في صفحة (17م.1080114) يتم تسجيل الخروج عن طريقها وكما نلاحظ في سطر " الغاء الكوكيز والتي تعلمناها مسبقا. 


اضافة مستخدم وتشفير كلمة المرور 
من خلال :7120111532)1::211 ندخل لقاعدة البيانات التي نعمل عليها 770601 ثم الدخول للجدول :2:21 كما في الصورة: 
جاع #8 عو ببق ماحم لدع اطهايقعع زمءم-طال7مطام.اود:4- 1ه ناذال١0‏ #]26732307ع09563989ط6ع 12347065 - ومع عام 7 مام عع 0ص أ/رس احصلملزحمم ام /ومطاقوا 5 | © جه ©ج 


ملت 59 د تععرمم © « غكمطادعو| زم 0 ل امام 


5 323 5الوناوعم0 نقى إنزممصا لك إروميع كخ] ‏ إيعدما غك طععهه5 لما له5 لغ عمسفعننك5 كا ووبرمءرق [) © 5١‏ © 92 30 > 





ظ ؟ .. (85ا136 أمعععم) ظ 





ظ غ1 03008 لاط 036303585 عا 





30010 - لجع ظ »+ 2 ظ > >> 
0 , 0 111111 لظ 
0 2003 9 6 
مع ] [ 1ع ] [ عدتاما ] ومنتاقممط لا 0 9 6 
002 2 6 
9 9 


من خلال الصورة أعلاه نق م بالضغط على (170ع1225) او باللغة العربية (ادخال) وسيتم الادخال كما في الصورة: 





متددلد 9د 4 دزه»م © د غدهطاهعها لئيا 01 كن آلاأمدام 
05 35 ؤ5ألوناأوعم0 نقى إزممما لك أرمم»ع 2غ أرعقما غ3 طعبوع5 لما ل0ه5 [غ عنعنن5 خا وعوبرمو8 1 © 5 © ها 21 + 


عساد/ا لالز ومتاعمسط عمنا!1 مصسام 72 .. عاطق أممعمه) ظ 
013 0ض 


ظ ل ظ 8 ظ (88)قطعو عمقم ْ 1 030 لاط 03130355 م5 
4 ظ ؟ 2 ظ > >> 


5 


0 1 م 

: 5 
2 برجم 
1 

اما (3) ضع 











9 
. 1# 


من خلال الصورة أعلاه قمنا بإضافة اسم المستخدم او مدير الموقع كما في الصورة (32)1:1112) ثم اضافة كلمة المرور (77 )١‏ ولكن لاحظ قمنا باختيار 
نوعها (711(5) وسيتم تحويل كلمة المرور )١١*9(‏ الى كلمة مشفرة في قاعدة البيانات . بعد القيام بضغط الزر (70)) يتم التنفيذ وسيكون شكل اسم 
المستخدم وكلمة المرور كما في الصورة: 


0 /00967 :ع اا8 0لا 
اتلواف اه [وكت 61لا الطيدة 2 2:00967 اا 0/ا 


أع .0 أم طاععغ]. /نانانا نالا 



























































505 


05ل + 
]هم تلاكعهم عسقم 0[ > ه ]| ه 


0 ا اط590/50964ع9623طع202 | 0احصلة ١‏ 1 عأعاعنا له لإممنا م ]الحا تن 


مما لع عتعاعنا #كَم ‏ عومدحن تن “تع دماعت اناا الث عاع8 اي ١‏ 1 


0100 لم10 | ممع عرع مجعملا ناك | -كتئتم؟ أه اعطددسلا نا | -لقته] 5131 : لالاوراك 


كما نلاحظ في الصورة أعلاه تم تشفير كلمة المرور وظهرت كما في الصورة في العمود (2255101:0). 


نقوم الان بتجربة الدخول بكلمة مرور خاطنة وكلمة مرور صحيحة. بعد التجربة سنلاحظ عدم ادخالنا للوحة التحكم بإدخال كلمة مرور خاطنئة وعند 
ادخال الكمة مرور صحيحة سيتم اظهار روابط صفحات الادخال كما في الصورة: 


50 1 0 8 0 5 0 98 
جه امب دحام .ص اوه ا/رص اح لق /باعع رمام /ا05 1 أاأقءه| [ ا 





القائهة || الآخبار 


الخدمات_| | هصدراء الموقع 


كالبفع الخروح 


الى هنا قمنا بعمل تأمين للوحة التحكم الرئيسية اعلاهء نأتي الان الى تأمين جميع الصفحات في المجلدات الموجودة ضمن المجلد (2)1:2112) ونعني بذلك 
صفحات الادخال والاخراج والتعديل والحذف لكل المجلدات (القائمة - الخدمات - الأخبار ). 


سيتم اضافة كود الكوكيز لجميع الصفحات كما في الصورة : 





لزتادز 2 > 
11-![20و ماع15 ' ] 111نانان_5) 11 
(""صطح . 2122 1 ”/ . . :م1 طأهقعت 1" ) عع مدعطآ 


/ 


كما نلاحظ اعلاه قمنا بإضافة كود الكوكيز لاحد صفحات الادخال وذلك في الاسطر الأولى وهو عبارة عن شرط والذي يعني في حالة كانت قيمة الكوكيز 
الذي اسميناه (1961,05©0]) لا تساوي (5715) يتم التوجه مباشرة الى صفحة الدخول (رطم.:©120) الموجودة ضمن المجلد 3::11. ولابد من 
اضافة هذا الكود لجميع الصفحات حتى تكون محمية ولا يتم الوصول لها الا اذا كان المستخدم قد ادخال كلمة المرور كاملة. 


ننتقل الآن لتجهيز الصفحة الرئيسية للموقع والخطوة الآن ملئ الجداول بالبيانات وبعدها سنقوم بالخطوة التالية وهي باستيراد البيانات من قاعدة 
البيانات الى الصفحة الرئيسية بشكل ديناميكي. نقوم الآن بملئ الجدول الخاص بالخدمات (5678) والجزء الذي سيقوم بعرض هذه الخدمات هو كما في 


الصورة : 


0 0 00967 :ع |08 
لعلله . اة وكت زو “اإطفوة ا 0 00 1000 





تصميم وإستضافة مواقع إلكترونية 


تصميم واستضافة مواقع الكترونية تصاميم رواد التكنولوجيا قسم تصميم من ضمن خدمات رواد التكنولوجيا صيانة 
وتركيب انظمة ادارة محتوى تصميم الجرافكس قسم تصميم الجرافكس الحاسوب وتركيب الشيكات للمؤسسات 
واستضافة مواقع الكترونية وتركيب انظمة قسم تصميم الجرافكس قسم تصميم والمراكز بمختلف توجهاتها من ضمن 
ادارة محتوى تصميم واستضافة مواقع الجرافكس قسم تصميم الجرافكس خدمات رواد التكنولوجيا 





سنجعل الجزء أعلاه يستورد البيانات من الجدول 517 وهنا لابد ان تكون الخدمات الرئيسية " فقط حسب بنائنا للموقع وتخطيطنا المسبق بالإضافة 
للصور ويتم الغاء الصور اعلاه والبيانات لأنها افتراضية الى ان يتم الربط مع قاعدة البيانات. وبعد ملئ الجدول 5»17 بالبيانات والصور ستظهر 
البيانات التي في الصورة: 


2 نف ا 7 © خا ل 2ه 2؟ لع تت راع زه 1م /أومطاقه! 5 ١‏ "0 جه » 


تفاصيل 
لا تقوم رواد التكنولوجيا بتصميم المواقع الالكترونية الرسمية بأنواعها سواء كانت تجارية أو مؤسسات 
خدمية أو حكومية او منظمات أهلية ومجتمعية وفقا لأحدث التصاميم العالمية والأنيقة. واستضاه»ه 


من الخدمات الراقية والحميلة التي نقدمها تصاميم لجمبع وسائل الدعاية والإعلان,فريق محترف 
وخيرة عالية في التصاميم الورقية والمطبوعات بأنوعها بالاضافة إلى ذوق التصميم الحميلة والجذابة 


]نصمم شيكات بأحدت التقنيات وبكل احترافية ونقدم خدمات الصيانة للحاسبات والشبكات بأنواعها 
#اللمؤسسات والشركات والأشخاص. 





نربط الجدول الخاص بالخدمات مع الجزء الذي حددناه مسبقا وهو الجزء الموجود في «رط[.ز©112)1 الرئيسية وسنقوم بعمل استيراد البيانات المطلوبة 
الى هذا الجزء بشكل أتوماتيكي. 


سنحذف >؟ من الأجزاء ونكتفي بواحد فقط ونجعله ضمن الدالة 1112 وسيتكرر بعدد الخدمات التي قدمناها وهي ” خدمات ويجب ان لا تزيد عن ” 
وسيكون شكل الكود بعد الحذف للجزئين كما في الصورة: 


0 00967 :ع اا8 ١/0‏ 
اتلوافا» لوكت 1ت علو للصيية 2 2:00967 اناا 


ع .0 م طاععغ]. ثانالا نالا 











. 3 . : 1 ” 5-5 
١ 1 ]- 59 20‏ ' جح 5 ودج حيبت : 
لسرم لقا تمي لشم 1 شع ا 


<21 11-3 "3_مدعي "1255-1 لدف 

خط >خدماتتاقط» 

< "5-5213 535 ارت 2-015 
:"2 1555-11 5-015 

< قت /ر >ست "" 31052 5-12 1323 5-1 51 51 "23 ز . 51-1315-3134 ”5 1512232 “رطع "”عحمع 5 1703 2< "27 . 4 0121315-10 “ر 115032325 “رطعج"-2 معط د> 
< 01 ر» 
<13/,>صياتة حاسوب وتركيب شبكاتة135ه» 
<"ر_1213ن"-58 135 201 
جه 
من شضسن تنجحدمهات روات التكتولوجيا صياتة الحاسوب وتركيب الشبكات للهؤوسسات والهسراكرّ يهسختلقف توحهاتها 

من ضسنّ مخدمهات روات التكتولوجيا 


حوره 
حق/>. . تقاصيل أكترت"لشسغط. 15 1دع عن" عم مر "تطناط_91211 غموط تلمنانغناط"- 5 15ت 53> 
01 ره 
0317 رع 
د/ عط» 





لاحظ من سطر "١‏ هو الجزء الذي سنعمل عليه. وسنبدأ بعمل اتصال لقاعدة البيانات ثم الاستعلام وبعده ننتقل لاستبدال العناصر او العناوين التجريبية 
فمثلا في سطر؟" هذا رابط للصورة التجريبية سيتم حذفه كاملا واستبداله بكود استيراد الصورة من قاعدة البيانات(11126)» ايضا في سطر ٠ه“‏ 
سنستبدل العنوان بعنوان الخدمة من قاعدة البيانات (12©20) »ما بين السطرين 7/ا و ٠٠١‏ سنضع كود استدعاء التفاصيل (0614). سطر 8١‏ (تفاصيل 
أكثر) سنعمل عليه لاحقا. في نهاية التعديل والاستبدال ووضع الكود المناسب سيكون شكل الكود كما في الصورة: 


3 1 55 ل 5 8 9 5 ا 9 7 مل 


لبي حسم لسر لفاتى شين الشهحنويض -- - 62 358 
<23/#عدماتتا<قط»>» 35 
0 
(""صطم . 13 1ددع " ) 111102 نردطامر:ة > 31 
( "عات 31 8152 لظانلظلن عبعرمع 1011م م 511" ) بلاعتعنات_ 1ن 5 تحط 1 تادعع 5 42 
2 3 
2<" 2 قعانةتة [128133:1قندط :عزنا لك :طا 13" -5 512771 علطةقع > 

لت ا إن 

<2 531115((14ع52) تلأاقطاعة_طعاع 2 _لن قتتم - تامع 5) 12قطم حرطد2 > 

اما > 

<7 5-513 155 2011 
"5-111 ققرت 2011 

<2 : [ "12137 ' ] تمعد . " “رق قسدعتع2 5 تسد" مل!طعت حرطامرة > 51 
011 ره ذ5 
:3ر2 :2 [ "مقصط ' ] تمع مط©طعت حبطاحرة عد ذاه 52 
<"ر_213ق"- 5 135 01> 53 
رةه 54 
ارت م [ "ع4 ' ] تتمعدة مطعع حرطامر > 55 
العده اركف 56 
<3/». . تقاصيل أكثر<" لشغط. 15 1هدععن "حمر "ناط_01104 شوط 1مناناناط"- 5 35 1ه 53> 537 
11 ره 58 
011 > 59 
ناك 
:603 رع الزن 
652 
222 [ ترنامر2 > 53 
تع 1طق ع ار دح عا ثور > 5 
01317 ره | كلد 
</ عتطعد/ر عدرل | كات 
<2-- تيجهياية محتوي المفموقح ‏ !»© 6 





| 


لا جديد في الكود سوى دمجه مع كود 1:31 في سطر ١‏ ؛ كود الاتصال بقاعدة البيانات. في سطر ” ؛ كود الاستعلام للجدول الذي نريد عرض بياناته » 
أغلقنا الكود في ”4. في سطر 4 ؛ بدأنا عمل جدول والغرض منه لجعل اجزاء عرض البيانات تظهر بشكل أفقي كل جزء داخل خليه (60) ضمن الجدول 
ايضا قمنا بعمل ستايل مختصر بدون كلاس لتحديد المساحة الجانبية (مزع:22) من الجوائب تكون اتوماتيكية ومن الأعلى والاسفل تكون صفر 
بالإضافة إلى العرض تم تحديد ٠٠؛‏ بكسل. 


: 0 00967 :ع |08 
1ع .0 أم طاععغ]. ننانانا نالا 


اتلوافا» لوكت تسلو للصيية 2 /0096 :2 ا اا8 ١/0‏ 





في سطره ؛ بدأنا بعمل صف. سطر "5 فتحنا كود وقمنا بكتابة الدالة 771:11 واستدعينا الاستعلام الى داخل المتغير 12017 واغلقنا الكود ايضا في نفس 


السطرء في سطر ؛ بدأنا عمل خلية» سطر 8 : بدأنا بعمل الكلاس 


وسيكون شكل الموقع كما في الصورة: 


نضمم شبكات بأحدت التقنيات وبكل 
٠‏ احترافية ونقدم خدمات الصيانة للحاسيات 


من الخدمات الراقية والجميلة التي نقدمها 
تصاميم لجمبع وسائل الدعاية 
والإعلان,فريق محترف وخيرة عالية في 
التصاميم الورقية والمطبوعات بأنوعها 


بالاضافة إلى ذوق التصميم الجميلة 


ده امات 


تصاميم مواقع الكترونية 


الالكترونية الرسمية بأنواعها سواء كانت 
تجارية أو مؤسسات خدمية أو حكومية او 
منظمات أهلية ومجتمعية وفقا لأحدت 
التضاميم العالمية والأنيقة. واستضاه: 


لعلف عد عه والجذابة 
تقاصيل أكتر.. 


000102 





سنقوم بعمل اضافة جديد للبيانات أعلاه وهو القيام بعمل دالة تقوم باستيراد جزء من التفاصيل فقط وليس كلها وذلك عن طريق دالة (0)وطاداة 
وصورتها العامة: 


(111111111,1111111121:2,]ة0)) 5111511 


والصورة العامة توضح ان هذه الدالة تقوم بعملية اخراج عدد معين من الوغؤط أو الحروف حيث يرمز زمغ الى المتغير الذي يحمل النص الذي نريد 
تحديد مقدار ما يظهر من1.4ع 21127 ويشير الى رقم الحرف في النص الذي سنبدأ منهء 612 1222م هو عدد الوغ)زط المسموحة او التي نريدها. 
وسنقوم بتركيب الكود في السطر الخاص بالتفاصيل 064 كما في الصورة: 


0 00967 :ع اا8 ١/0‏ 
2 2:00967 اناا 


وت لضسووة 


ع .0 م طاععغ]. ثانالا نالا 





<123 ”,> خدماتتا<13آه» 


( ""قظام . 13 1ددع " ) 12-2111012 ترتامر2 > 
(""أاقت 2100 815 الطانلطن ممعم 81م م لنأشاظة " ) 277 1ك _ل1ن متتددنا دادع 5 


عر 

<<" :2 تعانتت :12913113 قاط معن نانك : ا 91" -5 512171 83112ا > 
م لاما به 
22 5225111((4) 2317 2ة_طعناع 12 _لاوقتتم - تنمعد5) 17112 حراط > 
01> 


2 م [ " ععك " ] تمع قاعتح يرم ع 5 ترناحرة > 


2 15 65 0 


1 رك 


"5-3211 5م هوت 20117 
"عع 11زهن"-5 قم هرت 20139 
<25 ت [ "203 ' ] تامع 5 . " “رق وإسدحتع 2 5 ندع" مطعه حرطادة > 
<031 > 
3ط رعة2 : [ " مدعظ ' ] رمع 5 مطعه حبطحة مدخطاهع 
<"ر_1ع42ي"- 5 155 0117 
له فق 
عل ع"..". (222 رلا رعأجدعع 5 ) عد عطناك مطعه حيدام > 
حوره 
<ة/>. . تقاصيل أكترو<" 1لشغط. 115هعمن "ممع رز ""لاعاطظ_012101 شوظ للامناناناط" - 5 15ت 9ه 
011 ره 
0315 ره 


لوك وه 
| شطع 


ص 


5 


ص 


5 يرس 


ص 


3 
24 
5 
56 
5 
و 


د (زغ رن 


الاش 


12 ار جه 


اللخ ارس 


252 [ ترإلادر2 > 
جع اطهعا اننا > 
:01 ره 
د/ عطعدة/ر عدطه» 
<-- تبهاية محتوى المسوقع --!+» 


كر 5 42 رفظ رض ليب عق 





الله لخ زم للخ ار 


رع 
نذا 


الزيادة التي قمنا بعملها أو تعديلها هي سطرين فقط. في سطره؛ ؛ اضفنا كود وعرفنا متغير جديد)ده)9 ووضعنا بداخله بيانات التفاصيل()16). وسيتم 
وضع البيانات فيها في كل مرة لكل سجل. في سطر"“٠ه‏ قمنا بتطبيق الدالة ()911785461 وادخلنا المتغير الذي سيحوي النص او التفاصيل )زع)4 ثم حددنا 
صفر وهو ان يبدأ من الصفر ثم حدد ؟ 7١‏ بت مقدار ما سيقوم بإخراجه من البيانات الخاص بالتفاصيل وأما النقطتين التي بين علامتي التنصيص نشير 
الى ان هناك تفاصيل اخرى. وسيكون شكله بعد التطبيق كما في الصورة: 


- 7 6071 اداءة عازه ات 


تصاميم مواقع الكترونية 


نصمم شيكات بأحدث التقنيات وبكل 
احترافية ونقدم خدمات الصيانة للحاسيات 


من الخدمات الراقية والحميلة التي نقدمها 
تصاميم لجمبع وسائل الدعاية 
والإعلان,فريق محترف وخيرة عالية في 
التصاميم الورقية و.. 


تقوم رواد التكنولوجيا بتصميم المواقع 
الالكترونية الرسمية بأنواعها سواء كانت 
تجارية أو مؤسسات خدمية أو حكومية او 
منظمات أ.. 


. 





في هذه الخطوة نقوم بعمل اللازم للرابط الأزرق وهو عند الضغط عليه سيقوم بعرض التفاصيل كاملة وهي العنوان والتفاصيل وسيتوجب علينا عمل 
صفحة تقوم بيذ الوظيفا وستقوم يعملها وستيميها ورانن 560 ]ول داخل المجلد. العام وهو انم مختص التقاصين الخدماك..وسيكون الكود الخاض 
بها كما في الصورة: 


0 00967 :ع اا8 ١/0‏ 


اتلواع ا لوكت يفي 2 67 :2 ع ||ا08/ا 


ات لضسووة 





75 ت2 ("'صطم . 1203122121 " ) 12211102 تمرطامرة هه 
< "1162م وطا زوج " -5 135[ 20177 


01> هتا العتوان<*01>ه 
<01/ > هتا التقاصبل<*01-ه> 


:035 ره 


2 2 ('انرطم . مجع هس 1 ' ) 121112 حرطاح” > 





كما نلاحظ أعلاه سطر ١‏ استدعينا الجزء الأول من الموقع في سطر " قمنا بعمل ديف واستدعينا الكلاس 04606 والسطر 5-5 قمنا بعمل ؟ديفات 
للعنوان والتفاصيل في سطر ٠١‏ استدعينا الجزء السفلي للموقع. وسيكون الشكل كما في الصورة: 





سنقوم بعمل كلاسين في 5]716».055 الموجود في جدول 55و02 كلاس (12620) للعنوان وكلاس آخر للتفاصيل (166) . وسيكون شكل الكلاسات كالتالي: 


51 12 . 
: 21 : 1533 ع2 013 
22 : عم1امع 
551131 , 11101235 , "التقلام 1 1127 131325" : 37 1 لتتة 12 ك1 
182 2 : 55 101112-51 
2513 : 1ق 1-51 11ت 1 
11 1152 2م11 عدم 1 : وص د ممهم 
:01010 م1 عدم1 : تام شطع -عجردع 
: 27893 : عم لامح - ل تتامع وعاع مط 
عاق 5 : 21 قط 
58 : نمعا -0311 12 قل 
+2422 55113 :عم عوط 
غعوة غعوة نوش : 115 1 مهدهع عم عوط 
+ 1165:9242 


حم 
1 
1 


5 0 


لهك 30 20 30 فا 
3 مس +1 احا 


لكك | إطلخ (طت 3427 إوك) 


زه 


مهس 85 5-2 


| 


5 عداء‎ ١ 
031 ع2‎ 1533 : 221 
عملامهت‎ : 2 
"التقنلام 1 11217 13171325" : 137 لقتنت ك1‎ , 11101235 , 551131 
10111--51 55 : 1 522 
1 1ق 1 15ت‎ : 2513 
2م11 عدم 1 : ص د ممهم‎ 1152 11 
نم1 عدم1 : تام شطع -عجردع‎ 01010: 
8عاقتتق 23:7 1ن 12 قتط‎ 
نر تع -03111 12 قالط‎ : 55 
113صه :عع عمط‎ 2233+ 1 
غعوة غعرة عورش : 115 مهمع عم عمط‎ 
ع1‎ : 9842 + 


إكر 26 


0 زف 


كل همل همل همل فم فم هم فم هم هْمل فم هم همل همل هم فْمل همل هُْْمل فم كفم ف( فلع فيك لقي 
6 1 1 0 15 17 1 15 15 1557 
وها فد 


1 كد 0" 
2 15 2 © 





وبعد الاستدعاء للكلاسات وربطها سيكون شكل الصفحة كما في الصورة: 


7200-5 


0 مم7 /00967 :ع |08 
اتلك ت 160و اإطووة ا 0 00 ا 10000 


ع .0 م طاععغ]. ثانالا نالا 





نقوم الان بعمل الكود اللازم في رابط (تفاصيل أكثر) في صفحة 1[م.:©1206 ونربطه بالصفحة م1م.066_5©17 كما في الصورة : 


عر ع" . .". (222 ,نا ,عع 5 ) عد وطناك مطعه حرطاحة > 
درك 
ع2 "نو/» . . تقاصيل أكثر<'ضغط_خق1وعنو 232 رمع عاتاط ' -5 1855م ' [1] تامع 3-5 31 صطج . #عدعع_نتعق ' -2 معو 2ع" صقطعهة نرطامر”ة > 
035 > 
11 ره 





كما نلاحظ تم ربط الرابط بالصفحة [م.016)_5©17 وسيتم ارسال ال10 الخاص بأي خدمة للصفحة «ام.06)_56177 والتي تقوم بدورها بأخذ الرقم 
والاستعلام عن الخدمة التي طلبنا التفاصيل عنها واخراجها من قاعدة البيانات وعرضها كاملة. ونأتي الآن لعمل الكود اللازم لذلك. 


سيكون شكل الكود في «وا[م.0166_56©17 كما في الصورة: 


252 2 ("نطح . 1222221 " ) 121110 حرطاحر:ة > 


211272 12ت "5-7 35 ورت 2015 
ترام 2 > 
(""”"عطمح . 13 1ددع ”" ) 11111102 


]5 © - 14ة 
ع 1اطوع ملع وصاع هلمن / 


("13-251337 معم راجن تعترمدع برمعع م عا 5212 " ) تاعتعناق_ 1ن 5 تتشحتط 1 تادع 2 5 


( (5125111) 7م81 22ت_طصطاءع1_12ن 5 نتمسحتمع 5 ) 11طم 
1 
[ " تدمعظ ' ] ممع 5 > لدمراة 
[ "عع " ] بجمعة > نم5 
د 
عر 
<< 01 ”ع2 2م دعطة مطعهت حرطمرة عد " مدم5"-5 55 1ه 2015 
<< 01 رعت2 حم ع5 مط©طعه دحرطادرة هد "عمن"7 2ق 1235 2031 


31 ”ره 


22 تج (' وطح . معدع مس 1 " ) 1211102 دحرطام2 > 





بعد الضغط على اي من (تفاصيل أكثر..) الخاص بالخدمات ستظهر كما في الصورة: 


2 


الر سسيه سس 0 من تحن اتتصل بنا 


جراقكس وتصاميع 


1003006 لالت را ا زرك ل تسا لك رات الدعاياة رار جاتن فريك نترنة ركيرة جائياه قرا التعايي الررقا رار كر جات لامر باركاناء و را 
التصدلة الكسللك والكدائة 





لم نقم بعمل استيراد للصورة ويمكننا اذا اردنا ذلك بعمل ديف خاص بها وبنفس الية العنوان والتفاصيل مع زيادة امتداد الصورة او مكانها في المجلد 
(/12185) بدون سلاش ونقطتين بخلاف السابق لأن الصفحة والمجلد في نفس المكان. 


ننتقل الآن إلى القائمة وجعلها تستورد البيانات من قاعدة البيانات وبنفس طريقة الخدمات بفارق بسيط . سيكون التعديل على صفحة «رطم.1206:21 
والتي توجد فيها القائمة وسنقوم باستدعاء الجدول الخاص بالقائمة وربطه بالصفحة (باستثناء الرئيسية) . وقبل كل شيء نقوم بملئ بيانات القائمة 
حسب القائمة الموجودة مسبقا لدينا وبالترتيب كما في الصورة: 


١/081١: 00967 0 111‏ 
توا سد أ0.و1محاءعع]0]0©1ض1 :اتأهمع 2 772755202 2:00967 8|115 ١/0‏ 





<--هتا يداية القائهة--!#*ه 

( "طح . 13 1ددع "" ) 1211102 صرطامة > 
- ("عاكت 1 831 الاظانلطن تمعد لويم م مك55" ) اعد عاق _ 1ن قنزدحتط 1 نادع 51 
عت 


<"" ااطتصرند" -5 35 زه 2015 
< 2111 
<11 رعدة ,»> الرئيسية <"وترطم. عع 15 "2-2 فعط وه 11> 


7 
ف 
رو 
- 
رس 
-- 
5 


0 

1 
مج 
نه 
نا 


<2 31112((1ع52) بلاقععة_طععع1_2و ديزم > جتمع5) ع1 قطم حيطام2 > 


دمر 
الح[ لية] اانا 


<11 ”مهتهج “ره : [ " مدعصط ' ] تمع صمطعه حرطمر اعد" "ع2 ومعرر وجع3 11> 
222 [7 تزلاتر ه 
11ا رع 


11 ره 


2--هتا تهاية القاتثئهةك--!* 





في سطر 74-3١5‏ قمنا بعمل اتصال واستيراد لجدول القائمة من قاعدة البيانات .سطر "١‏ وبعد الرئيسية قمنا بعمل دالة 771111 وستقوم بسرد جميع 
العناوين للقائمة (122»20) . سطر 7” حذفنا جميع العناصر في القائمة باستثناء أحدها واستبدلنا العنوان بكود اخراج للعناوين وستقوم الدالة 77116 
بذلك وتمر على جميع العناوين للقائمة حسب السطر ”". ونلاحظ عدم وجود رابط وهنا نقوم بعمل اللازم لذلك ونريد صفحة للتفاصيل خاصة بالقائمة 
كي نقوم بتحويل المتصفح بعد الضغط على اي عنوان للقائمة. سنسمي الصفحة [1م.0164_12361213 وهي اختصار لتفاصيل القائمة. وهي مشابهة تماما 
لصفحة 1م.066_56177 مع تعديل بسيط وسيكون الكود الخاص بها كما في الصورة: 


صفحة 110م.2011ر_]ه1 : 


252 2 ("نطح . 12012121 " ) 12211102 ترتامر به 


5" ره عا ومع "عم مزهت 2115 


نزتادر” > 
( "وطح . 213 نردع " ) 11111012 


]55 5 - 1ه 
عاطقع عغطء 3615 اننا / 


اشر ا 48025 رف أنه كد إذس سل له 


(" 104-5310 عطعطه لتلاعم 512011 * 1اظةاظ5") باعدعناقت_1ن 5 تتسحتطا لنادعع 5 


( (51225111) لاقطاطة_طعاع 12 _1نوت تدحت تمعدة ) 112طم 
1 
[ " دع ' ] بجمعرة - لدصداة 
: [ " ع0 ' ] زومعدة > أعل 5 
2 
01 “ع2 عم تققطة صطعه حرطحرة عد" مدمدط" 2ق 5ه 1ت 01> 
<01 لرهح2 م ع5 مط؟طعه حرطدرة هد" نم-5 3م زه 03> 


117 ره 





<25 2 ('ترطمح . 202:2 1 '" ) 1121110352 تحتتادر”ة ت 


كما تلاحظ نفس الققباية: فم تعديلفقظ اسم اللمدول. إلى بورووهوين فى سطن. + ,"تقوم الاك بالرجوع: الى رواب القؤائم تقوم .باضافة الرابظ لقل عنص ف 
القائنمة حسب الكود: 


١/08 ||: 00967 0 0‏ 
الاكدا أع0.0أم حاعع0©1م1 :اأجممع ‏ 772755202 2:00967 |8 ١/60‏ 





سم حم 0-6 لاه سايم الساكصا 


02 1 1121-1111 
-0 ) لات نات _ 1ن متتس- نا 1 داعععد ؟ 


لخر لت 


1 #8 ارس 


ل 


<" ااتمة" -5 55 1ه 20115 


ب 
ب 
ب 
- 
- 
2 
- 
- 
ب 
3 


2111 65 
<11 >< قش /, > الرئيسية < "طرطص . مدعنم 1 "د17عغعط وعد 11ج الاك 
3 
1 ( (5225111) تلاقططة_طعناعء12_لوويتم - تتمعدة) 112ظطم 31 
<131 عجو رع 1 ] تمع 5 مط©طعحع مطعع 132 323 
ا 
0 355 
36 
111 > 37 
01 “رجه 2 
-- هتقا تارك لقائمعك اج شاع 





وسيكون شكل القائمة كما في الصورة : 


| ”#>->» غ4 7١14‏ 1 
بز اسسسييياة بلصت رسا سمس تعمن ١‏ عستا سس أآجر الإأعتدار 5-0-0 سقس نسب 


من اعمائة 


2-01 يد" ا كا 0 ١ل‏ 1 [لش 6 1 07 
لنعمٌ صديل) دلا 2 لززالك !0721225355 


ننتقل للجزء السفلي والموجود فيه (آخر الأخبار) كما في الصورة : 


اخر الاخبار تواصل معنا عير: 
رواد التكنولوجيا تفتتح حورة تصميم واسضافقة الع كت كات يكل 
المواقع الالكترونية تلغون : 00967714490030 


رواد التكنولوجيا يتقدم بعرض جديد لعملائه الكرام تلفاكس : 00967714490030 


دورات تدريبية لمصممي المواقع ومدراء الاعلام ر ل 1 تل شرن 
ا 2-1 جوال : 714490030 


عرض خاص بمناسبة شهعر رمضان المبارك أو عبرصفحاتنا الاجتماعية 


رواد التكنولوجيا يهنئ الامة الاسلامية والعربية ٍِ < 0 و1 


ا ال الك 


أع .0 أم طاععغ. /انانانا نالا 





سنقوم أولا بملئ الجدول 220975 بالأخبار كما في الصورة : 





- 7 ع4 72 59 خا 2خ 328 وا /5لالاع 301/7 /اعع زهمام/أدهطاقءهو| ذا ١‏ © ىو 
ضافة جديد 
العنوان التاريخ تفاصيل تعديل 
53 5 51 / أقام رواد التكنولوجيا دروة تدريبية في محال تصميم المواقع الالكترونية واستضافتها لمجموعة2 تعديل 
روات التكتولوحيا يكيم ذورة تتويبية نح لق د جا عرو رنيلك ب بوط يتسا سابوط مسري 0 | حذف 
الجرافكس في نهاية مايو الحالي المتخصصة في التصاميم والطباعة. | حذق 
0 1 58 6 أقام رواد التكنولوجيا دروة تدريبية في محال تصميم المواقع الالكترونية واستضافتها لمجموعة2 تعدبيل 
رواد التكتولوجيا يقيم دورة تدريبية د الاق 0 اجووي ميا بعري بر ةبوتب ار | حذق 
رواد التكنولوجيا تغفتتح قسم تصاميم 202 تعتزم رواد التكنولوجيا افتتاح قسم تصاميم الحرافكس والذي يقوم بتنفيذ جميع المهام تعديل 
الجرافكس في نهاية مايو الحالي المتخصصة في التصاميم والطباعة. | حذق 
رواد التكنولوجيا تهنئ الأمة العربية 2002 رواد التكنولوجيا تهنئ الأمة العربية والاسلامية بمناسية شهر رمضان المبارك, اعاده الله علينا تعديل 
والاسلامية بمناسبة شهر رمضان المبارك ولكم باليمن والبركات. | حذق 
عرض خاص من رواد التكنولوجيا 2 عرض خاص من رواد التكنولوجيا , عرض خاص من رواد التكنولوجياعرض خاص من رواد التكتولوجيا نحي 


سنعدل الان على الصفحة مطام.12016:2 ونقوم باستيراد الجدول (الأخبار) من قاعدة البيانات كما في الصورة: 


بوه 


<<" عبرم م" -5 5ه زه 2031 


< 011 /ر» آجر الأخبار<"1152قدعط"-5 135 يكدعةًا| 5 
( "”عطم . ق 1 1 ددج " ) 11211102 ترتامرة > 8 
- (" 5ط 10 61 1128 مم 8101م م 551 ") مدعنت _ 1ن 5تتمح ذا 1 دادع 5 9 
ك2 11 
111 


<27 4 ((52251112) تاقعطةق_طععع1_2و ققد - تامع ) ع1 قطهم حرطمة»> 
<11/رعجة > روات الععتولوجيا تقتتح دورة تصهشيم و ! سصضاقكة السمواقع الالكتروتية "47 اع وعر 1 5ع 11> 
<111ا ”> 


ا 0 


22 [ حيطجرةي 
دكا 





من خلال الصورة أعلاه حذفنا جميع الأخبار وابقينا على واحدة فقط. وسنستبدلها بكود لاستيراد عناوين الأخبار ولكن هنا فقط نريد آخر ه أخبار فقط 
وليس جميعها لذلك سنضيف في الاستعلام خاصية جديد وهي (111210) ونضيفها في آخر الاستعلام ونحدد رقم للأخبار وسيكون الكود كما في الصورة: 


2 


<<" ويام 2" 5-2 135 2015> 
<03/> آخر الأخبار<"201322عط5"-1355ت 03> 


آرم فد اوس 


( "طح . 213 دمع "" ] 1211102 حصتطامر > 
("5 112:21 52ظنا 1 512 011812 دجامم 8011م م ك5 ") باعتعنت _7501تدك ل دادع 5 
ع2 


5 0 


111 
2 31115((14ع52) تلاقطاطة_طععع2_لوقتمد - تمعد ) ع1 قطم حرطامرد> 


<11”رعجه رعة 2 :> [ 'مدصط ' ] جمعة مطعه حرطم > 2<" #4 "ادع وعم وه 11> 
25 ( حيطم2 > 


11> 
1317 "رجه 





بعد عمل الكود اعلاه سيتم عرض الأخبار ولكن ينقص الروابط وهنا نفس الطرق السابقة نقوم بعمل صفحة خاص بتفاصيل الأخبار وستكون 
مطم.26175_غ»16 نفس الأكود السابقة في صفحات التفاصيل مع تغيير بسيط. وسيكون كود الصفحة كما في الصورة: 


: 0 00967 :ع اا8 0لا 
ع .0 م طاععغ]. ثانالا نالا 





اتاو »وات 00 6زوا الضيوة 2 /0096 :2 ع اا8 0لا 














252 2(" تطح . 12:02:21 " ) 1111102 ترتادركة د 


آخر 55 


د" ارت عومج 7 عم 5ت 1ه 0011357 


مرطاصر 2 > 
(""”صطح . و11 دمع " ) 1211101 


06 رف 


]55ت 5 د وده 
عا1اطوع عطع وضاع اننا“ / 


لزه د نف 


نكا 


("10-510 عطعطه 5هاعم 12011 * 1باظشدظة") تاعتعناك_1ن 5تزسح ف انادع2 5 


2 2 


( (5125111) يماقاططةق_طع اع 2 _1ن 5 تسحتتتمخد 5 ) 1 قطم 
1 


6 
د 
- 


[ " تدعط "' ] برمعة ع لدماة 
م [ " عمق ' ] بومعر5ة > مل 5 
[ " مع2قهقك ' ] برومعرة ع دج من 5 
/ 
عم 
01 “رع 2 عم مععطة مطعه حرطدرة عد " لدم" 5-2 35 1ت 01> 
"معن" حو مهوت 2011 
اتزلاد 2 > 
505252 مطعهم 
ج "دعطة " عطلطعهة 
50828 مطعهم 
عل 


آت 0 شخ 58١‏ 45 رض 


له 


115 رجه 


1 


8 


:13137 رجه 


نا 


كن إظثر اطخ آك كن آكخثر كين إظرن اين كر 55 5 


2 
ف( 


252 2 (' نطم . 2ج: 1202 " ) 1111102 جرتادر:ة > 





قمنا بإضافة التاريخ ضمن الديف الخاص بالتفاصيل بعد استدعائه من قاعدة البيانات. ونأتي لربط الصفحة مع كود الاخبار في صفحة 1[م.1216:22 
وسيكون الرابط كالتالي : 


5 5 8 - 5 
ل 002 تلك اا لتادك لقع تقة -”- ده 
- - أل 


< "عرم عوونع "عو مت 1رهء 20117 


كن 85 42 رفك 


<<" ومبراع 2" -5 55 1ت 01> 
01> آخجر الأخبار<"ع1352لمدعط"-13355ء 2-001 


آزت 40 د 


( ”ططخ . 13 1ددج ” ) 1111102 ترزتامر > 
(""5 1121 52ظلا 21 8535 لاظانلظن جدسمم نسم م لتاظداظة ") تاعتعناك _ 1ن تتتسحط 1 دادع 5 
لت 


قل قم 


111 
2 + ((52251112) لاقعاعطة_طعطع2_لوقميم ع تامعد5 ) 1 قطم حيطاص: > 


| 


<11 رعدهرع<2 1[ 'لمقعط ' ] م52 قطعع حرطم > <2 "< ' [10] تامع #10 صطح . دباعم _طعن "عللععط هع" مطعع حرطم 322 13> 


- ! 
5 شه 2 كن 85 32 يرف 


قم قم قم 


22 7 ترلادر2 > 


ف( 
أنه 4 05 


111 ره 
:117 ار 





قم فس[ 
55 


وسيكون شكل الأخبار كما في الصورة : 


١ ||‏ رواد التكنولوجيا شارع حدة 


أ . 1 ولو يعد 


عي خا عن لد ال لين تلغون : 00967714490030 730001 1 لحيعة 


0 ا 0 > - 10067711400020 
للد 1 ل ل ل 0 ا لل عاك 


-- خير قي ا 


:فناسية شهر رمضان القبارك من “ات شرن 


714490030 : جوال‎ ١ 5 


رواد التكنولوجيا تغفتتح قسم تصاميم الجر اقكخحس 


أو عيرصفحاتنا الاجتماعيه 


في نهايه مايو الحالى 


«» رواذ التكنولوجيا يقيم ذورة تدريبية ع يد ا و1 


0 00967 :ع اا8 ١/0‏ 
تلوافا» لوكت تسلو للصيية 2 /0096 :2 عا اا8 ١/0‏ 


1ع .0 م لاععغ]. ثانالا نالا 





وبعد الضغط على احد عناوين الأخبار ستكون كما في الصورة : 


تت هاف 5 7 © « << أ د ْ 0 0 0 ْ 70-1 منام. دمع ص عل يع زهم/ادهطاهءها 5] | ج » 


2 


الرسسية خدماشتا مَنَ أعمائما] ا 
رواد التكتونوجيا تهتئ الأمة العربية والاسلامية بمتاسبة شهِر رمضان المبارك 


2017 
ارالك أل ترا ور اناه الترياء لوانتا ناميا خزر ركان اليارك, احلذه اك كينا رت بائدس رالاركات, 





خلاصة حول التطبيق : 

بعد أن تم الانتهاء من الموقع سيتم رفعه على سرفر موقع رواد التكنولوجيا وتطبيق عملية الرفع 
والتركيب وما إلى ذلك. وهنا نريد الاشارة الى إلى بعض التنبيهات. تم إنشاء التطبيق الأخير للتعليم 
ويعتبر موقع بسيط ومدخل للغة ملام لمن يريد تعلم اللغة بشكل احترافي وربما ينقص الموقع الكثير 
من الملاحظات او التعديلات التي بإمكان المتعلم ان يستفيد منه ويعدل عليه كما يريد. هذا التطبيق 
وهذا الكتاب ليس إلا مفتاح لمواصلة التعلم والإبداع وليس للتقيد بما فيه بل بالبحث والممارسة وتعلم 
الجديد وتعلم الإخطاء وإصلاحها. 


وقد كان الغرض الرئيس هو تعلم أساسيات تصميم المواقع والانتقال لإنشاء المواقع الالكترونية بواسطة 
السكربتات وأنظمة إدارة المحتوى ويكون لدينا فكرة وخلفغية حول كيفية عمل المواقع وطريقة التعامل 
معها مثل: جوملا (10017/11.4) وهو ما سنتعلمه في هذه الكتاب إن شاء الله. 


ولرؤية التطبيق الدخول على الرابط : 001/اع0.2أمطاعع).15511 أو الدكول على الموق؟ع الرتئيس 0.21 1«رطاعه).171531 


081١|: 00967 0 111‏ اا 
اا أ0.وأمحاءعع]0]0©1ص1 :اتأهمع ‏ 772755202 2:00967 8|115 0/ا 











رفع الموقع على السرفر وإطلاقه 


بعد الانتهاء من عمل الموقع الإلكتروني ومراجعته يتم وضعه في استضافة تقوم بتركيب الموقع عليها وهنا بعض المعلومات العامة حول الاستضافات. 


الاستضافة 
هي عملية وضع صفحات الويب على أحد السرفرات الخاصة بالإنترنت أو المتصلة بشبكة الإنترنت وبواسطة دومين يتم حجزة عن شراء استضافة 
مدفوعة او الاشتراك في استضافة مجانية. قبل عملية الاستضافة للموقع الالكتروني لابد من اختيار المؤسسة او الشركة المقدمة لهذه الخدمة بشكل 
دقيق وحسب مواصفات ومتطلبات الموقع الالكتروني الخاص بك. 


إن الاستضافة للموقع الالكتروني تلعب دور كبير في ظهور الموقع الالكتروني بالشكل المطلوب وحمايته والحفاظ على قاعدة بياناته اضافة لتوفير 
مساحات مناسبة ومقدار تناقل لا محدود للبيانات. يفضل أن من يدير الاستضافة أو يقوم بشرائها وإدارتها أن تكون لديه خلفية وفكرة حول التعامل مع 
السرفرات المستضيفة وطريقة عملهاء بالإضافة إلى قدرته على التواصل باللغة الإنجليزية مع الشركات المستضيفة. إضافة لابد من يقوم أخذ استضافة 
أن يكون له إطلاع على الاستضافة ومتابعة هذا بالنسبة لمن يعمل في المجال ولا يحبذ لمن لديه موقع ولا يعمل في المجال نفسه. 


وهنا بعض الخصائص التي تعتبر مهمة وتكون ضمن العروض الخاصة بشركات الاستضافة: 


وهى مقدار المساحة المتاحة للموقع وتحسب , . 
1 تتوفر حاليا مساحات كبيرة ولا محدودة فى 
بالجيجا بايت أو الميجا بايت 5 ْ 
(522) , بعض شركات الاستضافة 
حيث ٠٠٠١‏ ميجا بايت - ١‏ جيجا بايت 


وهي مقدار تناقل البيانات وهي شبيهة باشتراك 
مقدار تناقل البيانات الانترنت حين تستنفد مقدار البيانات الخاصة | ويفضل شراء استضافة تكون مقدار تناقل 
عقون ) بك يتم فصل اشتراك خطك. وهنا هو مقدار ما | البيانات فيها لامحدود (مفتوح) 
هو مسموح للمتصفحين لتصفح الموقع. 


عبارة عن بروتوكولات خاص بإرسال البيانات 

عن طريق السرفرات المدفوعة ولها أهمية | يفضل شراء استضافات تدعم هذه الخواص 
لبعض المؤسسات التي تدعم إرسال النشرات | وتكون لامحدودة (مفتوحة الارسال) 
الإلكترونية الرسمية 


عدد الإيميلات بالإضافة لخاصية دعم 
(53111 ع 2028) 


الدعم توفر الدعم في المؤسسة المستضيفة وحل | لابد من وجود دعم بوسائل مختلفة مثل الهاتف 
(امممسة) المشاكل والشات والبريد الالكتروني 





110111 0 00967 :|08 اا 
د كسد أ0.0أم داءعع0©1م1 :اأهممع ‏ 772755202 2:00967 |8 0/ا 


لذ 


بعض شركات الاستضافة المعروفة والكفوّة في مجال استضافة المواقع الالكترونية. 


قبل تفعيلها تحتاج لإثبات هوية ولا تسمح لك 
+10511105111 الولايات المتحدة الأمريكية بمزاولة عملك الا بعد ارسال صور للهوية أو 


جواز سفر وصور من البطاقة الائتمانية 


قبل تفعيلها تحتاج لإثبات هوية ولا تسمح لك 
105194101 الولايات المتحدة الأمريكية بمزاولة عملك الا بعد ارسال صور للهوية أو 


جواز سفر وصور من البطاقة الائتمانية 


١ 5 ' 0014110‏ 5 
الولايات المتحدة الأمريكيه لا تنتطلب إثبات هوية 





خطوات رفع الموقع على الاستضافة 
هنا خطوات لابد من عملها بشكل دقيق قبل الرفع وأثناء الرفع للسرفر والخطوات هي : 


نقوم بعمل قاعدة بيانات جديدة على السرفر المستضيف وحفظ كلمات المرور واسم السرفر المستضيف الخاص بقاعدة البيانات. نقوم بتصدير جداول 
قاعدة البيانات الخاصة بنا في الجهاز إلى مجلد معين في الجهاز ثم عمل استيراد للجداول لقاعدة البيانات الجديد على الاستضافة. 


نضع الملفات ضمن مجلد مالم تكن لدومين آخر. ويجب ان يكون اسم الصفحة الرئيسية الخاصة بالموقع «رطام.ءدع20ة أو صرطام.)1نم]ء0. 


نقوم بالتعديل على ملفات الررام.011115© الخاصة بالاتصال بقاعدة البيانات وتغبير بيانات الدخول السابقة بالبيانات التي حفظها في الخطوة الأولى. 


التطبيق العملي على رفع المواقع الالكترونية. 


من خلال التطبيق الخاص بنا سنقوم بعملية رفع الموقع كاملا واطلاقه والخطوات كالتالي: 


نقوم بعمل قاعدة بيانات في الاستضافة (تختلف الطريقة والواجهة من استضافة إلى اخرى ) ومن خلال الاستضافة الخاصة بنا نقوم بالدخول على لوحة 
التحكم ثم الضغط على زر (7112231:0 1215 01575001): 


١/08 ||: 00967 0 111 
١/0 8|115 2:00967 772755202  عصموهتا: ادا أع0.0أمحاعع60©1]م1‎ 





© 2 وي © :922 عد حظة ىر ون د 


ممع ونملكومم ناما نا5عو:5ه20الود5عرو:وومطه إوومم اذيزانا. عأمممع لا ونون شيرزا/مم ©الاكلزانا © الائرانا 


الادع نووم 10 ذا 5ع03:3635 اناترزاا 5 اننا 0 1015| 
51/0 2310لا 
ستظهر الصفحة التالية : 
12210 0213235 ©5019 /إالا! 


/[2 230/ /[/[/ك هع 1701 31 دع /ا/ 1/72/1715 091293525 72 1113/7121 3253 0] /[5 23 3/1 /١١1‏ [/111710/1713/701 07 كأ0/ ع01أاد هط نامز باام// 313823525( الات /زار/ 
3/10 512/715[ |1712/1/ 1112/1309 ]1/ 0/112 ,202105 7لأع|آناط 50/112 0/110ل/0 386/231701151١1‏ (ع"/ا /(1113/1/ ل( أل ع] انان ع 3/2 0213823525 1 5/ | 71/111311 
3 362255 0ا 5 017/1292 ع/ا13/ 1/731 لىع 5لا / 01/7 01 //1713/ 1/7317 |2/1/ع0/17/ تع ولا 1ل 5, [أ/ا| بإ/1) ]| 0231© 10[ 11220 /1لامئز , 0931382356 3 عونا 70 .01/75 
021382252 1/731 10] 1/17 /0 1701/77 1230 6317 0913356 


5 ثم 018316 :1 مم51 


ظ ظ !اا تعوجطج]ص0] رعلا 
مع]5 ]نهل 


نقوم بعمل الاسم في الحقل أعلاه ثم الزر الأخضر (56©7 72166) وستظهر الصفحة التالية : 


ئآ)0ر 1«11اع5ه20د0 ع5 لع00م 


:5615لا 0318363856ا 18816ن) :2 مرع1اه 


١‏ ييا تمدن 


84 كافاع هت لققء وملحمه :مزاول 


00 311 قمر مرو دجون 
مأقعمعت) لرمررزوعوم 5000 اقسآ د روانم لطأومعاكت 


في الحقل الاول نضع الاسم المناسب لقاعدة البيانات والحقلين التاليين لكلمة المرور ثم الزر الأخضر (7ع5ل1 عأوءع0)) وستظهر الصفحة التالية : 








: 0 مم7 /00967 :ع |08 
ع .0 م طاععغ]. ثانالا نالا 


اتلك ت 160و اإطووة ا 0 00 ا 10000 





5 


”!!!70990 لروتككمم اانا "ةاون 090 وراد رمك 0ع600 
35 156 10 :ع5لا 800 :3 مم51 

اعصضاعسر مجسسنة بع 15ل)| 

مجحبو حي سر سح سن؟ ع0312035] 


7-5 زين (#ا 
ا“ |“ 


41 


لها ها | لها [ها ها ا | ها 
8 جح لكا | ه العا | © ١‏ 6 | ه 


مع]5 ]عرهءل! 


من خلال الصورة أعلاه نقوم بالتأشير على المربع الأعلى وتأشير علامة الصح على الكل. ثم (51667 اد 31) وستظهر الصفحة التالية وهي الأهم 
وتحمل كلمة المرور واسم المستخدم واسم قاعدة البيانات ثم الضغط على الخطوة التالية وستظهر الصفحة التالية وتعني الانتهاء من عمل قاعدة 
البيانات. 





ا لم 11 ا 11 11 


يات «موامارر 55 ناك عن حاناميقف 





9 0 1 





12210 0263625 ©5901 /إال! 


»1351 156 1616 مزه :4 مم51 


."مطاماععزهم_نه لصاون 0213635 عأ 10 2000 كدننا "أعع زه1م_نهلأصانة” رعولا 


.ع5 اتعنأاموة لمخم 


.5 الت لاا ناملا 101 أعدنا أعأموة للخ 


101 اانااأع ا 





11111 0 00967 :|08 ا/ا 
اتا ساد أ0.و1مداءعع0]0©1مأ :اأهمع 2 772755202 2:00967 8|128 ١/0‏ 


5 


نقوم بتصدير قاعدة البيانات الخاصة بنا وهي بالدخول إلى ال10031120516 في السرفر المحلي الذي نعمل عليه ثم إلى 125:2011112م1م وستظهر 
الصفحة التالية : 


|0000 


(3] قاعدة ييانات | (للم 501 | يه الحالة | 52 المستخدمون | +24] تصدير | (2©ز] استيراد | شل الإعدادات | (2] سيل تتاني ١‏ | إستنساخ | (<م متقيرات 


مجموحات المحارف ٠|‏ ا محركات 


- او جك اعرخاور تا وتاوتت حتاع ةاعم 





مك تغيير كلمة السر خانم: 1)02/|2 13 أو هطادع10 

اناا تعمننا عبمعه 

إصدارة المزود: 321-5612)) اعناع5 /[ ج20 _الاكيزا/ا - و16) 
تسخة البروتوكول: 10 

المستخنم: 10016)00102311051 

5-0005 0ض تعبا :انا (8لأن) علمعامنا 8-]انا تأعدروطاء رعبمع5 


هك (وملأداامء ومتأععمممء يعبمع5 ب©) : | ؟ أع_لوعمعو_قتانا 


نيع : © ©039ا3/79]- دغل | ؟ 31م - العربية 


49 مظير: | * 3018م | 
٠‏ 412 5/طلاط (ج6دالا/ا) 4ك 2/عراعومم 


03630356 0ناوكلام - أوقلااصط ذا تضمزورعنا أمعزاء‎ 5010 - 20111026 - ٠ 
5 5102-2 0245 56037 


٠‏ الوذلاتم :تممأكمعغره مرنام ري 


٠‏ حجمالخط: | 8296 * أ 


طق 5و10أأع5 عرمانا 


ماحل كرا /اام طم 


4+ :1017136100ما لرماورع/ا 

مستتدات وتاثقية 

ويكي 

الصفحة الرئيسية الرسمية ل 5315 لي ثر/إ|/اام دام 
مشاركه 

اجلب دعم 

قائمة التعدياةقت 








نقوم بالضغط على (قاعدة بيانات) وستظهر جميع قواعد البيانات ونقوم بعمل كليك على قاعدة البيانات الخاصة بنا وهي )171:06 وستظهر كما في 
الصورة: 


تفي 


ل 38 ظ ولو عوية دع اطقنيقعع زهءم - طل7 ملامع نك لت د_طل:2--1ظ ناخ اا ط173366#ع9ع19140117ع89ع974ع14340 - مععاه7 مطام عع لص أ/رصتصل قزمم جام /أومطاقها 5 | "© جه ©» 


* عام /غدمطافها / عدم طاع ها ,لل لإ 








أ زك] غعهطادعه! » © جمعرمىم 
ا - - يم 011ص 2 عصدن بك استيراد طلي عمليات | |22 الإمتيازات أ" 0115 © أحداث 235 ورعوول11 


الجدول 2 ه العملية صقوف إن توع مهتغدااه) الحجمح الحمل الراند 
85 متصملج 5 استعراض آمل بناء 8# إيحت 6 إدخال 9 إفقراغ 9© سقط >0 6008ه1ا ء_اأقعمعو_8أن 16 كينوبايت - 
[) لاصعدم استعراض حمل بتاء هف إيحت 6غ إدخال ذا إفراغ © سقط >5 ونامهضها أء_انومعمعو_8أنا 165 كينويايت 3 
[]) و5ربتاعم استعراض أتملة بناء #ا إبيحت 326 إبخال 89 إفقراغ © سقط >6 089ا100| اع_اقع8_080أنا 16 كينويايت ب 
[) نااعه استعراض جما يناء ا إيحت غ3 إبخال ا إقراغ © سقط >2 8نامهها ء_اوععمعو_قأن 16 كينويايت - 


<< المجموع 3 قلامهها اء_لوعمعو_قأن 64 كيلوبايت 0 بايد 
+4 0 تحديد الكل | مع المحدد: 


22 عرض نسخة للطباعة وهم قاموس البيانات 


الاسم عدد العواميد: | 

















0 /00967 :عا اا8 0لا 
تلوف اء لوكت 61لا الطيية 2 2:00967 ااا 


أ .0 م طاععغ]. /نانانا انا 

























































































حرس 


من خلال الصورة أعلاه نقوم بالتأشير على مربع (تحديد الكل) واختيار من الخيارات الموجودة في (مع المحدد) نختار (تصدير) كما في الصورة التالية: 





]كه طادعه! » © غععرمم 
تا يناء | (لل 501 | ذا إيحث ٠|‏ [3) استعلام يواسطة متثال 0 4] تصدير | + استيراد | شق عمليات | 22 الإمتيازات | في 8008065 | ©) أحداث | 36 1010065 


الجدول ‏ ى العمئية صقوف (9 توع 011360 2) الحجح الحمل الراند 
متصلج 3 استعراض مر يناء © إيحت غغ إدخال ا إقراغ © سقط -9 08اه0هها أء_اهعمءو_قئان 16 كينويايت 0 
لاع استعراض مل بناء هل إبحت ع إدخال ا إفراخ © سقط -5 008هها أء_اهعمعو_قن 16 كينويايت 2 
5بناعم [ | استعراض ملل يناء هل إيحت 6غ إدخال ا إقراغ © سقط -6 8نامهها اء_اهعمعو_وئأن 15 كيتوبايت 
2 لمعه استعراض مل بناء هل إيحت 6غ إدخال ا إقراغ © سقط -2 08اههها أء_اوعمءوو_قان 16 كينويايت 7 
4 حدول (حداول) المجموع 3 قالاممها أء_لصعمعن_وقأن 64 كيلوبايت 0 بايد 

1 # تحديد الكل 

2 عرض نسخة للطباعة لي 9 
ا 5 أتضئ الجدول 
الاسم- ظ ظ 





تسخ الجدول مع البادئة 


بعد اختيار تصدير ستظهر الصفحة التالية : 


لم 4# اطلوععيع دءاطمايق مع زميم- طل7مامع د دم د_ط1-2:0 انام 1م #]ع15733ع9ع191401176ع 434097489 - مععاه]7مطامعع لمارطتحملمترصوم طم /أووطاهه! 5] | © جه » 





الك ا 
ما يتاء إش 501 لكا إيحث 3 استعلاح يو اسطه مثال له تصدير 7-1 استيراد ذإ حمليات 82 الإمتيار ات 2 ]نانم © أحدات 4 1110015 


تصدير الجداول من قاعدة المعطيات "1ع ع[10م" 


التصدير: 





©) 5موماأمه أقتماصاصم عط لزاه نزقام وال - عاعانا) 


() 05ملغمه عاطأوومم اله /ؤدام 15ل - 0مغأ5نات 


4ه 


معم0 









عمط عاط أه 5ع1؟ معمره كبزه نزام 
10101 10 يتلاك 


اعع مق 





او2.5) ععزهم ل 


من خلال الصورة أعلاه نقوم بالضغط على زر (إنطلق) وسيتم تنزيل الجداول مباشرة كما يظهر في الجزء السفلي على اليسار من خلال السهم الأيمن 
نضغط عليه ثم نختار 1010161 122 5120737 (عرض في المجلد) هذا لمستخدمي جوجل كروم ثم نأخذ قاعدة البيانات ونضعها في اي مكان نريده ونحدده. 


0 /00967 :ع اا08/ا 
اوه وت زو المووة 2 00967 :2 ااا8 ١/0‏ 


ع .0 م طاععغ]. /انانانا نالا 


























خض 


نأتي الان إلى رفع الجداول إلى قاعدة البيانات الجديدة على السرفر وهي عن طريق الدخول على لوحة التحكم ثم الذهاب الى زر 117123:20212ر[كما 
في الصورة : 


9 وسسسسر 03 17 22١‏ وم (/ / تت ٠‏ 
ينين 2-17 م وه حار 0 لح ندم 


عأمجمع ا ماحمفكروهم ناما فا5عو:5ه2 ل وذعرو:ضوم2 إهموعم النذيزانا غ2غ70عظامزومل كرااممزم ©اناذرانا © الاترانا 
الدع :وموم 1120 هنا 03363585 انا5ززاا 5لا اناا 08 5 ا 
2510 1/0 


نقوم بتسجل الدخول عن طريق الصفحة التالية باسم المستخدم وكلمة المرور الخاصة بقاعدة البيانات التي أنشأناها كما في الصورة : 


قن الاامام 


شنا ااام لام 6غ عدورمعاع الا 
ْ 30130 | 01 


؟ تالومع | 


ظ (©) ما وه ١‏ -< 
لاس 71١١‏ 


ظ ظ :255100 








1010عوقم أعوع م 


: 0 رن آ/ااممام 








5ع وزومع يهنا | كأءممدط0 3 وعواطوليولا  4<(‏ عدلومءطعميز5 198 | دومنهع5 2ق | أرممها لك | غرمميع له 5:بؤه)5 يها 501 لغ وعد5وط058 3) 
© [0 © ها عند 
اعلااع5 أداعاالاء 11 10ض١ا‏ 100 1م0ممطا ١١‏ ... (دعاطها أمععوه) 
35 ذا نامآ 5عاطجغ ملا 
ا 15 ©1832 © لاص 0 عاط عفأوعم 0 © 


.85580م16077انا 01 (ما ,2م521 ,ماعو) 0ع55عمجممء عط زوم عالط 
مأع.اأو5. تعامة»ا [لممأكققع1م0امع].[1022130]]. نا لع أذنام عجمق30 1145 لمعد5دع]م رمع رخ 





(8اا/اا50 >ادا/) 50م عاآ ملذا | عالط ع005اي) | :؟عأنام 7م آناملا عدبلام8 () 











ام تتنالكم_نملأدأاوأاعتمهط! بمماعع ال 0دمامن تعنوعد طعنها عط حمم] أععاع5 )2 


من خلال الصورة أعلاه نقوم بالضغط على زر »1/11 ©18005) أو اختيار ملف باللغة العربية والذهاب لمكان الجداول التي في جهازنا واختيارها ثم 
الضغط على زر (انطلق) أو (تنفيذ) اسفل الصفحة السابقة وسيتم رفع الملف واعطائك رسالة نجاح بإتمام الرفع كما في الصورة التالية: 


081١|: 00967 0 1111‏ اا 
الا كسا أ0.وأمحاءعع]0]0©1ص1 :اتأهمع ‏ 772755202 2:00967 8|115 0/ا 


















































5عمتأراهه ذم 


501 زه 


15 38 2 وامعبع © 


5 طق |أزممما لك غرومعيع 2 بمعب9 1 طعبدءد5 دك عانناع نماك مل 





0248095 عطأ ماما ومتكرمممما 


:1501| 0غ مااع 


.85580م077ع ]انا 01 (م21 ,2م521 ,ماعو) لع5ود5عمجممء عط نزودم عالط 
ماع.اوة. :عام« [لمأكقعم تامع].[22231م]]. ما لقع أقنام عحلمق3 1125 معددع]م ررم رخ 


)501/18 :>اداا) معكمطء عا5 ملخا | عاط ع5مهط0) | :عع أنامدممء ناملا عديلام8 () 


ا 


إين!««1[ بممعععال 0دمامن بعنمعد طعننا عط مرم] أععاع5 ()2 





؟” 8عأنا | -118 عط أه أع5 ععاءع1323 


:1001| ادعوم 


(0/75/اع 1131753 عأوعرط 7روء ]| بعباع ناه 8 ,دع// ع3/9/ 11716014 0ة بزهلةا 9000 3 ع5 77/984 78/5/ .ألدمذا الامعممة صلاط عط مغ عدماء 15 ]ا قأعغاع0 أملرعد5 عطا ع35ء 0أ 0م157 30 0 (املأمناررع اما عط بروالم ا 


0 | <للا0؟ 1151! عطا] 1017 513/170 ,مكا5 مغ ذ5بلام أه رعطصصسلا 





رفع ملفات الموقع كاملة وذلك بالذهاب للمجلد الموجود فيه الملفات ووضعها في ملف مضغوط كما في الصورة : 


0 4 





. عامة؛ 2216© © ) 


لسري 


ل ل زال ال لا يدانا افيد د يك !| 


2 19 © 6[ © 


.. (85ا30 أمعععه) | 


2000 
لالاعمم 


ع 
5لا 
56 25 





م عع [وام طعروعذ - < غععزمم < اللللماا ٠<‏ محصقي ١‏ (ن) عاوانا اقعما <١‏ ععغنمحمت ١م‏ 7 9 >« 


© 0 . 2د ؟عام؟ بمع لذ ص8 معم0 > ععاموةو0 
ع5 م1 00110 ع03] 5 عدمةلا 0 

ممغادىء0 !111 

1 001/05 














اث فحص العلغات المحددة باستخدام 
.ءءء لطع ىق مخ لمث 








كعع وام غمعءعء8 |25 


"نومع زممم" مغ للم كع نوءطنا 9 
...لقنو لمة كعع ىم دمحم 25لا 00 [هذ] 
القحعع لمة "تدمع زممم" مغ وكعممره) أكنال/اا الى 
علام؟ (معممته) لعدعع ممم 11 0 كك 
دع غرمطه عذوعءء) ممغادء 0‏ 191 6 دلت 8 
كمع 7ناء00] 
0 ف لامه6© منامروع مرولا بهو 
أمع اماءع» ياوع ‏ [يَكق 
اد غناءغ رهطا عذوع 0 
1 اتدا/ا 
0 ل 0 عن مصره© اللقار 
م5 © . 
: () عونم اما وق 
(:6) عم0 الثم ملام فل وت 







كع اع مهرم 


خممع5 مط اللالاء م 7١15/١6/١7‏ 


(:0) عحصساملا معلا وى 
(:غ) عدحصدداملا معلا وى 
(ع) عحصدداملا معلا وى 


ابيع ١‏ جك 


بعد التضليل على جميع الملفات نقوم بعمل كليك يمين ثم (إرسال إلى) ثم اول خيرا (1010©1 7127260 20011761:25560)) وسيكون شكله بعد الضغط 


كما في الصورة : 


عام عا طا1با٠ماء/ه./15.م‏ كوما لال كدق زم إض 
عام عا لأ-:117م 715/7 طعنن لل 5مءع10/٠‏ كر 
8 1,562 عمخطعءة 20 اشفمالالا. ‏ +ظبه.٠‏ م 7١15/6/8‏ ماله قر 
118 #مقع5 منزم ‏ لالابء م5/75١/15١7‏ وقمم ‏ ؟" منمروع مرولا بو 
118 مم5 ملام ٠١5‏ م1/75١/15١7‏ 2وقممء :7" 


بعد الدخول الى لوحة التحكم نذهب إلى التحكم بالملفات بواسطة الضغط على زر 712112861 15116 كما في الصورة : 





























0 /00967 :ع اا8 0لا 


| ]. 
تاوف اا» لوكت ينين 2 067 :2 |08 





اه وات زو المووة 


0 
4 > >ع تي تن تي > 
مزع >|5أنا ع الا »!015 أ1انامن) عالط لإع3وع ا عا ماه 
5نامع عم 500 عاط 13302 منماءج8 
5 3 ا مم 
و 


بعد الضغط على زر 712112861 17116 ستظهر الصفحة الرئيسية ونقوم برفع الملفات بالضغط على زر 1101020 كما في الصورة : 


كت برت 0 رام حاار 





02115 زطالظ 201١1185‏ عأمقكلا "111112 اانا" معد عدعوعاط .عوقنمغ5 عوزااره عه] عا تعر اياه 0ه عكن عغ3لصممعممهص! تخاواات غمم ععول 


عط يع ل متصمععم 
لحري » تن» إوم اف تت حيو روعت حاوف ب ل عله 0 و 410 0 اه حاو الي» اك كاه * ل »ير »60 تا 3 !| حوا- كات 


> #» 4 م كت هه ثم 4 


لعن اسسأ ما 
.]مره ععوعيع عمطت 1نم 600 الع 30 مع 8 عغعاع0 34واولهرمم 34وامنا عا عيدمالر 
...5 ألمععم ؟معزلع ؟معزلع 





١ 





م60 لاك ل ماع ورع ل 
ععلامع 


بعد انتهاء الرفع نقوم بفك الملف المضغوط بالضغط على الملف المضغوط ثم إختيار (171204) كما في الصورة : 


٠١ 01‏ ههه .ده 





6 - »واكاك وكا »تفع حاوارا»» و" ام 0 ه(! تاي 10 ررتا" الي حي" ور 0 4 الرزلن تكد نا 1ف كي 1 تال بدك زلاياظ إن سه دح دح ان 2 » عراس حاو ل" 0ك وان 1 او و » تزه --]1! 2زحواه 


اراد ء رز (وا» افع دح تحور وف وات اورف ف 0 دح زه ده 


اك ا 531 تر د 7 0 





نع مت كه 8 06 
.0012© عع وعيرع الاك اا عمطت الزنم 600 الع ةمع 8 عععاع0 
.5أممععهط عمءعزلع ؟معزلع 
ااه عععاءومنا 0 ااه عععاء5 )ي] لدماع8 يك" لمدومموع 852 عاعد8 9© اعيع ا عمه ونا تقلا عدون م 
وعم عملا1 مهناك طوعيش) 10011120!! ١30 52 ٠854‏ 
اماع 0 #/عوقاء8م إلزم 9:19 100 | 18 1.52 ْ 








نقوم بفك الملف والتأكيد على ذلك بعدها يتم الذهاب مباشرة للملف مطام. مكحم و الملف مطم. نع لصم وتغبير بيانات الدخول بالضخغط على الملف 
الأول مرطم.عتكصوء ثم الملف «رطم.2ع )درم واختيار -17011)01 ©000) كلا على حده: 


ملف رردام. 1112م 


© 1 











مبطامة عا 
5 5" " م" تمطلهعه 1" ) عأاععصددت _13وديجس حخومدت جع , 
اع 
4 
ملف ررحام. 0111152 
© ضأجاات هام |[؟_ هسم مم © ف 
مطم2 > 
9 ٍ" ,"156212058" ) ع6 2طم_217501 > رمن5 
: (7 ع7 عع قطمه متمق "” ) 0236 عه 
: (2مت5 , "2م_2ه1251ن2 " ) طنق_ع هع 20775)1_561 
2 





بالانتهاء من الخطوات أعلاه نذهب للموقع إذا كان على دومين او الى المجلد الذي اطلقنا فيه الموقع كما هو في التطبيق الحالي وسيكون الاطلاق 
الخاص بهذا التطبيق على الرابط : «رحام/)غعط. متمرطاءع)//: مراخط/ 


1ع .0 م طاععغ]. ننانانا نالا 





0 /00967 :ع اا8 ١/0‏ 
2 /0096 :2 ع اا8 0لا 


تلك وت 160و اإطووة 








وسيكون شكل الموقع النهائي الخاص بالتطبيق كما في الصورة : 


0 30 0 2 4 1 0 ٠. 
لاحت تبي بسب دير" 0 كر الأخبار ذمر ' السم ال 0-2 اصح‎ ١ لر لبد‎ 


تصاميم مواقه الكترونية 





تصاميم مواقع الكترونية 


تصمم شتيكات” باحدت التقنيات وبكل من الخدمات الراقية والحميلة التي نقدمها تقوم رواد التكتولوجيا بتصميم المواقع 
احترافية ونقدم خدمات الصيانة للحاسبات تصاميم لحجمبع ‏ وسائل الدعاية الالكترونية الرسمية بأنواعها سوك كانت 
والشبكات بأنواعها للمؤسسات والشركات والإعلان,فريق محترقف وخيرة عالية في تجارية أو مؤسسات خدمية أو حكومية او 
والأشخاص... التصاميم الورقية و.. منظمات أ.. 


تقاصبل اكثر.. 


1 10 تواصل معنا عير: 
3 آخر خبر قى رواد التكنولوجيا رواد التكنولوجيا شارع رح ف 
٠‏ عرض خاص من رواد التكنولوجيا تلغوت : 00967714490030 


١ _‏ ا 00 تلفاكس : 00967714490030 


بمناسية شهر رمضات المبارك ا 1ت سرون 


رواد التكنولوجيا تغتتح قسم تصاميم الجراقكس جوال : 714490030 


قي نهاية مايو الحالي أو 22 .0 2 


رواد التكنولوجيا يعيمم دورة تكريبيكت ع /ى + 00 و1 





أع .0 أم طاععغ. /انانانا نالا 








إواصكحهر 


0111ل 


2 1خط00111)ل يغ 2.5 !0001ل 





111111111 الخ 1 2001/1111 0115 


نظام إادارة المحتوى (جوملا) 


11111 0 00967 :|08 ا/ا 
اتا ساد أ0.و1مداءعع0]0©1مأ :اأهمع 2 772755202 2:00967 8|128 ١/0‏ 





5 
الباب الخامس جوملا 


جوهلا (001/1][) 
جوملا نظام إدارة محتوى 7115© (5157511511 '11411417/1171/115173 '201731191371©) يمكن من خلال جوملا إنشاء مواقع قوية وذو مواصفات 
عالية وتطبيقات ويب قوية وبسهولة تامة. و وتعتبر جوملا نظام إدارة محتوى مجاني مفتوح المصدر ومتوفر للجميع. 


ما هو 2115© (55751111/1 '4714111151/11571 ١1‏ '20177111171) 


هو نظام يحوي أدوات مبرمجة بشكل احترافي تساعد على ادارة محتوى الموقع الالكتروني والتحكم بأجزائه وبياناته وظهوره بشكل عام ويبرمجها 
فريق من المتطوعين حول العالم وهي مفتوحة المصدر مثل : جوملا - وورد بريس - دروبل. 


تتميز هذه الأنظمة بالمرونة العالية والسهولة في ادارتها بعيدا عن التعقيدات البرمجية الخاصة بالمواقع الالكترونية وبإمكانها تقبل أي مكونات خارجية 
من مواقع داعمه لها وتركيب اكواد جاهزة تسمى (مكونات - موديولات - اضافات مساعدة ) بشكل يدوي وبدون برمجة وبسهولة تامة بشرد توافقها 
مع الاصدار بالنظام. كما يوجد تحديث دوري لهذه الآنظمة من المواقع الرسمية الخاصة بها. 


البداية مع جوهلا !1/1 00[) 
سيكون لنا تطبيقات عملية على جوملا وكيفية تركيبها وعملها من البداية وسيكون لنا الان مقدمة حول جوملا وشرح عام عن مكوناتها ويمكن زيارة 


الموقع الرسمي لها من خلال الرابط : ع:773333.10011212.01 


مكونات جوملا! 
بداية جوملا نظام مبرمج بلغة معروفة وهي 7117 مع قاعدة البيانات ,713575001 بالإضافة إلى لغات تنسيق المواقع ( - 2553© - 255 ,1117/11 
0011-- 111311:5). 


مكونات نظام جوملا : 

قاعدة البيانات (ع12262125). 
الموديولات (7100111©5). 

المكونات الرئيسية (20127011:©1:]5)). 
قالب (ع)2[محمء1). 


اضافات مساعدة (ومزع[©). 


قاعدة البيانات (ع1226225): 


قاعدة البيانات وهي التي ستحوي مكونات الموقع من بيانات وسجلات. 


١/1081: 00967 0 1‏ 
اه لفت أعم.هأملاعع]©0)م1 :اتهوسع ‏ 772755202 2:00967 |8 ١/0‏ 





م" 
الموديولات (7100111©»5): 
هي أحد اجزاء المواقع الالكترونية والتي يتم ضبط اعداداتها وتحديد مكان ظهورها في الموقع. 
المكونات (00122201111]5)): 
هي المكونات الاساسية الخاصة بالموقع وقد تحوي موديلات واضافات مساعدة خاصة بها. 
قالب الموقع (21201266»)): 
قالب الموقع عبارة عن ستايل مصمم خصيصا للنظام جوملا أو لأي أنظمة أخرى ويتم تركيبها للنظام ويتم تغيير شكل الموقع من خلال قسم القوالب. 
اضافات مساعدة(15زع211): 
عبارة عن اضافات يتم تكرارها في اجزاء الموقع او تعمل عملها بشكل عام داخل الموقع بعدة أجزاء وليس جزء وتتكرر بشكل ديناميكي حسب وظيفتها. 
صورة عامة حول موقع يعمل بنظام جوملا: 


2 
مه ونس ونج موا 10095 م 10000110 





لت مط ابض عمو كك عه +6 10؟ لاقع - 


ميا 0 6611م بد لاك للها 701 موا 0511940 
بوسر بوسحم وجي بجوت اويل وجا ومواثة فط 00 دنا الداعام املاع محر العام صن مي و رف مور ومن 
مابس مده وسار ونا وهم لم0 ل« بحم موف 

0550 - درمة مكمعد اووس 
بده فارج 
م لال زكراش 
فبديثا لالت . 
1 
بف يدي ناسنا 


بيت +6 رخا 1706 عت ّ ححكمة و أحبيجية 
6© 92 © ل ونا وجمسم) رمع جويا مع 


تمضرهم ©© 65 اكدا « امفا دز رح مسعوو م0 ا مستت داز رونا للوتصمية 





١/0811: 00967 0 11111‏ 
الا كسا أ0.و1محاعع]0]0©1ص1 :اتأهمع ‏ 772755202 2:00967 8|115 ١/0‏ 


حسب الأسهم الموجود في صورة الموقع أعلاه جميع الاجزاء المشار لها عباره عن موديولات تم التحكم بها من خلال وضعها المكان المناسب لها 
وأيضا تحديد الجداول للبيانات أو أقسام الموقع الذي ستستمد منه البيانات وتقوم بعرضها. 


0111 غاذفذ 015 8 7101/5 لامر 201 كلكات امم علا 


غ0010:م عالصنا8 < عررونر 


520011 811016 
جم بعنيع8 880 

كاعه56 ذا :با اأطةاأداه 
0 يمع 
0 م 
2-0 بلع سوقمم جه عءا,م 
8 6ع56* 

0١م‏ 3 ناامنا غعنان3]1 أآنال غنا جاعه| غنا 35 > 1 لأ 

0 549+ 81501اع56 805 36أ/ا |5 11انا نا 236561 خا 1 لأ 


+١00‏ 6 613 غ376 516 7738003 01312613 ناء 30لا > 1 نا 


مغه5 * 


5 
0 > |" 01لأععاع 5 3 011005 
سس سم ست 27 





عند الضغط على مقالة أو خبر معين ضمن موقع يستخدم جوملا فإن المكائ الذي تظهر فيه المقالة او الخبر يسمى (011170116116©).وايضا هناك 
موديولات تتحكم فيها مكونات كما في الصورة السابقة. 
.266535 015 انا ع3 1311765 1131651303 غ6 5لا غ6 غ6 5ناأع 5676 8/لا615610 أ70 غ30غآأطوآ عباود5عؤرعزاعم 


ع6 غاع” قعل ,عام 53 آنال ع00176 .3ااناص عاغ7701285 أعناع0072ا .اع ممتاع5 غع عام 3د ع6 3اناءااعيا ععونع 
.0015| 01511551117 ك5ناع1126) نا 0غأكناز 131 أ/اأنام غأجمع2]385 .اهل 3 مراع ,01731 77اناعلاع 0 أ لامع 


: سدم 5 وج 


في الصورة اعلاه نلاحظ الجزء الذي يحوي ازرار (ع1115) او (760) وغيرها تظهر في جميع الأخبار أو المقالات للموقع بشكل أتوماتيكي. وهي 
تسمى 1211151115 اضافات مساعدة يتم ضبط اعداداتها وتحديد الاقسام التي ستتواجد فيها. 


0 00967 :ع اا8 ١/0‏ 
اتلوافا» لوكت 1ت علو للصيية 2 2:00967 اناا 


ع .0 م طاععغ]. ثانالا نالا 





العمل على جوملا »> 


سيتم التعرف على جوملا وكيفية التعامل معها وسيكون الاصدار الذي سنتعلم عليه هو النسخة 2.5.75 وأيضا نظرة عامة حول 3.352 001212( ويمكن 
للمتعلم على النسخة 2.5 أن يتعامل مع النسخة 3.2 بكل سهولة لتشابه النظام واختلاف الواجهة فقط وبعض التعديلات البرمجية. 


يجب أن تتوفر لدينا بعض الأدوات التي نستخدمها في تركيب جوملا والعمل عليها وهي كالتالي: 


برنامج سرفر محلي مثل (51721275617©1) وهو عبارة عن سرفر وهمي على جهازك يتم تركيب الموقع عليه وكأن الموقع يعمل على سرفر حقيقي 
على الانترنت. 


متصفح جوجل كروم بالإضافة إلى متصفح موزيلا فايرفوكس لتجريب المواقع على المتصفحين. 
دريم ويفر (*101:621111162571) ونستخدمه للتعديل على الأكواد وصفحات القوالب. 
اداة 15 وهي اضافة تضاف الى فايرفوكس وسنذكر لاحقا فائدتها. 


يفضل معروفة ولو بسيطة حول عمل المواقع الالكترونية ولغات البرمجة بالإضافة للغة الانجليزية. 


تنزيل جوملا من الموقع الرسمي وتركيبها 


نقوم بداية بإخذ آخر نسخة من جوملا من الموقع الرسمي لها على الرابط 12112.01:6ه193535:.100 ثم التأشير على 12075121020 والضغط على 2.5 
73128 1111 باللون البرتقالي الغامق كما في الصورة: 


001171030 * 


5 !0013ل 1710320خز00] 


١/4115 4([‏ 21966886 6 وا 
5 !0073ل 10310 5ه 031ملا : : 
59 4102 حك] | تروك" 


3 !013م0ل ممعم 55 0316منا اناه عطة 5ل030الانثامل دوزأااآم 0150 © 


3 !0013ل 71020ناز00] 





اهاحومل طأأبن 10 جأ5 ومتاع 6 065 300 015أ05عغلاء 01 11010530005 © 


و 0 اقمع اأطامحت عصة /لإالمعن- عونا © 
الع ] انلامعا لقع اضلاعع 1 


56ل ث م5معع 1 ا 0 57 225252-55 





00 0 /00967 :ع |08 /ا 
ا '. التلوا0 ا زواكت انق 7 اإعطيرة 2 00967 :2 عا اا8 ١/0‏ 





ستظهر الصفحة التالية: 


حت 6 تل تان ام]| »01 !"| ينب عع عا لياف 6" ا6عاه الو »89 يب 
5 اء23 ع30:وملا “.3 300 .3.3 [دالوممل كن ا ل لاع 4 4 لك 


ملاع ]0 53.9 منرم « 5م101 ع5دعاع2 





2051100 !والصممل #عه؟ 





امول طأأأنا معل0د ماعط ووتلأوهلنا معلالا <' 


1111 ]ع /البثر 


.2.5 !001213ل 00111030 


ع030منا :0ط .2014 ,31 !ع776اععع0نا الأنانا 0ع011مرمنا5 عط الأنلا تأعالانلا ,0011713ل 01 تما5اعلا ؤنامالاعم 11 15 25 0017113ل 
الاماع6 5لفقع عا ع5 ع35عام ,3 0173ل 10 005 1أأعناأذكما 


ح هت تل 2ا0ائك| »زه |" عب مش إن ]وو اث افا" مجاه لول از ب 





كن ١‏ ل لع ا ال ا ل 4 !) »كت على بعوواعد2 اأنط 2.520 ,كانا) «اوااودع 





« 5ع630اع3م .2.5 001713ل ]015 


من الصورة أعلاه نقوم بالضغط على الزر 2.5 !70012112 172055121020 باللون الازرق الصف الثاني . بعد الضغط عليه سيتم تحميل آخر نسخة من 
نظام جوملا. 


بعد تحميل الملف الخاص بجوملا نقوم بعمل مجلد داخل المجلد العام 775939 ونسميه 00111322.5( نقوم بفتحة وننقل الملف الخاص بجوملا الى المجلد 
5 ونقوم بفك الضغط كما في الصورة: 











25ملصموز لعروع5 ||| جه | + +١‏ 25وامممز ع صصص ع مصدس ع (ع) عاىز0 اوعما ع ععشمممح ١‏ 


3 معاعادة؟ دلخ انا > ومعمن -5 * عقاصوون 


8-5 


ع5 ع1 لمع لمهم عغونا عمهلخ |- ع اميد علد 
عع اططمة2.5.20-5_قاحده1 3 | ممغاىء0 للا 
كمه مانم 1 
مكة الآ اعوط ععع ولام أمععع م ع 
عع لط موقط 
أعووعاءدظ_اانطادع اطمنك- تافكف_قاحممهل م موقط 115 تالا 
كاغامن معمن 15م2 لاع هلا 
3 فحص العلثات المحددة باستخدام 698 عاكلا لبا الى 
]ع "ا كلاه اعورم عرماوع أ كع 81 كك 
دمع ةلا كل 
5 لمعك 
انان متامروع حمولط بهم 


امهنا 
عمصهت قلاع 
(©) 5زم ادعما وك 
زعلا عحساملا مواذا حم 
زع عحمساملا سمملذا ع 
كع للزعمرمرم (ع) عمساملا معلذا ع 


ألاء ةرمط عزأوع نا 
عمععاعل] 


رن كما 





0 /00967 :ع اا8 0لا 
اتلواف اه [وكت 61لا الطيدة 2 2:00967 اا 0/ا 


.0 م طاععغ]. /انانانا نالا 











بعد فك الضغط عن الملفات نقوم بحذف الملف المضغوط او نقله لمكان آخر للحاجة ستظهر كما في الصورة : 


9 












ام 00 25ماصممرضمح؟ | ا+> - ١‏ 32.5اصمعز <١‏ عع <١‏ محمويم ١‏ (ع)عاوزم امعما ١‏ ععغنممم ٠‏ للا 9- اق 
091 ددا عام بع لا نا * طاغانها عرواد5 * موعطنا صا عنساعم]آ > ععاموو0 
ع5 م1 م0011 ع:03] 3 عحمن لا ييه 3-5 
عام عا 7انالء ص 7١15/١2/7١‏ غم وتمتصلة لل ممغادء 0 !1 
لاه عا انال ص 7١15/٠5/7١‏ عطعق لال كمه اوه لل 
علام؟ عات 7١نال+‏ ص 7١15/٠1/7١‏ تك لال ععع وام جمعععم 1 
1010 عا ”7آانلء* ص ١+‏ 2/7١٠/2١1١١؟‏ كع 01م لامع فى 
عام عا 7١نالء*‏ ص + 7١15/٠5/7‏ كعوقمما لال كع قوطلا 
1010 عا 7١نلء*‏ ص ١1١5/١2/7١‏ كع ناعم لكل كع 00 هد 
عام عاع انا ص 7١15/٠5/7١‏ مهغهالمكما لال كنال ألى 
,عام عاط 7١انال+‏ ص + 7١15/+1/7‏ عودنومها لال كع د21 إض 
عام عا 7انالء ص 7١15/٠5/7١‏ كع لوطا لال دمع ٠/10‏ كل 
,1010 عا 17#نالء ص ١١12/١2/7١‏ دوه٠‏ نال 
10م عا ”7آانال+ ص ١1١5/١2/7١‏ اءتاننا للك منمروع مرولا رو 
عام عا انال ص 7١15/٠5/7١‏ كعانلمم لال 
لاه عا 7١انالء‏ ص + 7١15/١5/7‏ كمتوسام لال عسمممره © اللا 
لاه عاع ‏ 17ئالء ص 7١15/٠5/7١‏ كعغواممعة لال (©) عادزه ادءما وك 
1010 عا 17نلء* ص ١١12/١2/7١‏ مغ لل (:0) عدساهلا بمعلذا وت 
8 4 أمع7طناعه0 عع[ 7انالء ص + 7١15/١2/7‏ وىععع588 |[ | (:ع) عححساملا معلا و 
218 +#مقع5 ملام 7اباء ص 7١15/١1/7١‏ 31 (©) عددساملا معلا وى 
218 أمع7تناءه0 اثا/الا +١1‏ ص + 7١15/١5/7‏ دأحمممرز اكع 
8 18 مع صناءعه0 ع7 17ئل* ص ١15/١5/8١‏ عكلاععلا 0 اورطع ١١‏ ج63 
518 +77اناء 00 عع 1 7١نال+‏ ص + 7١12/١2/7‏ غاامقعم | | 
118 عا 0151 7اثالء ص 7١15/١5/8١‏ 1ك ةط.كامطم [ | 
218 +7ناء 00 ع1 7انالء ص + 7١15/١1/7‏ ,طعي |[ | 


7 22 ] 5 


كما نلاحظ الصورة أعلاه تظهر ملفات النظام كاملة نقوم الان بالذهاب على )10211051 ثم الضغط على المجلد 300111122.5 الذي فيه نظام جوملا 
وستظهر الصفحة كما في الصورة: 


تت ها نف 1 7 © ل« ل ذه ؟ 


5 


مام عع 0ص أ/رحصه 8 المأكمأ/32.5اترمههو ز/أومطاةها ذا | 0 جه ©» 





لوو ههه ١‏ 01 2.5.20 !0011ل 
© >.هه 80030 1005© 05 5*6 
©1030 1+ :1 
06 أععاء5 
300 أتاكم! !100013 072 09ة ]نال عذ5نا مأ عودناومةا عط غععاعو عووعام كاعع دك 100ةالهاد ماعط : 2 
(دوعلأث طأناه5) دمدق اام 50 
(العريية الموحدة) 7130لا 21م ٠165‏ :3 
وكات نات" 
(533/31قحم) 235313103 ل- امع عم ع :4 
13 853353 
(طعلامقرعط) 8ك م 13رع 0511-5 3ا8 0 ناو رع مع :5 
(لاقع9309130) الدومع8 
(5013م8) 80530516 8 5 
(ثوماعم3)قطط) 3030وانا8 تت 
0 0 
ج3 د 5ل ]18 مع زامم51 ممعمتط6 الكلها؟ : 7 


(30/ا!3 [) ١301610031‏ عمعواط 
003 

(عااطنمع, طعععن) جاععج0) 
(لكاطا) داوام3نا 

(13/13أذناش) حاذذاومع 
(لصمملوصتكا لمعغ1اصنا) ادأاومع 
(513185 لع غأمنا) تاد ذاومع 
0-000 

0000 





.معنا عناطناظ اأقععمع6 لالأات علا ع0منا لعدوعاع عروبر امد عع5 5 © !داتورهه10 


0 /00967 :ع اا8 0لا 


تركف روعت 
الراك ل فنفيفنا 2 /0096 :2 ع اا8 0لا 





و ت 11 لضسيوة 








"5/ 


نقوم باختيار اللغة العربية في حالة كانت لغة أخرى ثم الزر )26 في الأعلى على اليمين وستظهر الصفحة التالية: 


ال ع ا م “إبع|امعحهت 1 27 





خطوات التنصيب فحص ما قبل التثبيت (61) إعادة انتحص 6 اسايق ب ©) 





1 : اختيار اللعة 
فحص ماقيل التنبييت من اجل 7 1/ا!ة) 14:00 30-8111-2014 [ :277 ] عاط5:3 2.5.20 !00113ل: 
2 : قحص ما قيل النثييت إذا كان أي من هذه المتاصر غير مدعوم "أي غير متوفر” سيكون مكتوب 
باللون الأحمر (لا) عندها يرجى القيام بالإجراءات اللازمة لتصحيحها. عدم إصدار 5.2.4 << منرم نعم 
3 الترخيص القيام بذلك يمكن ان تؤدي إلى عدم تثبيت نظام جوملا! بشكل صحيح. حدر شت ب كد خاحرة 205 2 
دعم لعة التوصيف الموسعة الاللا نعم 
4 : تهينة قاحدة البياتات قواعد البياتات المعتمدة : 
0 (اأوكيزدم رأودبزم) د 
500 استخدام لغة افقتراضية متعددة وحدات البايت (أناقاء0 5 01306او30 | 18/() نعم 
5 : تهينة 10] إبيقاف التحميل الزائد للسلسة متعددة وحدات البابيت (0/7 0121030 و0أ56 0018 نعم 
دعم محلل 1111 نعم 
6 : الإحدادات الرئيسية دعم 32500101 بي 
م1ام.38017ناو 0م قابل للكتابة نعم 
7 : الإنهاء 
الإحعدادات التي سمي يها: 
هذه إعدادات 8040 التى يتصح بها من أجل ضمان التوافق التام مع نظام 3 
جوملا!. التوجيهات يتصح بها حاليا 
5 حت وو ا 33ت ارجح الامن (1160 ع6د5) سمل 0 
عرض الأخطاء (5,مم8 بزةاموام) لا يعمل يعمل 
رقع الملفات (305واملا ه51) يعمل يعمل 
زمن تشغيل الاقتنباسات السحرية (087726نا 0/0125 عأو113) لا يعمل لا يعمل 
080 5ع راب عأو3ا“! لا يعمل لا يعمل 
التسحيل العام (6106315 ,مع ذوزوعه) لا يعمل لا يعمل 
تخزين المخرجات (و7لقعآنا8 غناجانا0) لا يعمل يعمل 
بدء الجلسة بشكل الى ]518 مأناة ممنووء5) لا يعمل لا يعمل 
توفرة 219 خاصية فك الملقات المضغوطة يعمل يعمل 


©١183‏ برنامج "حر مفتوح المصدر” تم طرحه بموجب ا68/لالاات) رخصة جتنتو العمومية. 


نلاحظ في الاسفل على اليسار كلمة لسعم باللون الأحمر يجب تعديلها حسب طلب النظام وسنقوم بتغيير الاعدادات الخاصة :111101 111017 وازالة 
علامة الصح من أمامها وكذلك ال ع 810111112 )1ام)ن2) وذلك بالضغط بالزر الأيسر على 77311256171 كما في الصورة: 



























































[8]| اا © - ت | 0000 2 م80 وزلعالاع - لعمنائا مومى ]الا آي ٠.‏ الكت ١|‏ تطاسر 
5-005 
ككل - لصفحة الرئيسية إدراح تخطيط الصفحة وسطعل عغمووع 8 : (وسطء )) أاوه6م خم © 
مم : 5 ععاقمء2 : (وساطع نا 1 5 4 5 1 5 . 1 ١‏ ؤي بحث > 
أساسى) اواعم > |11 - .: 1 1 50 . : . 5000 
قا نس عتاكدت ص . تعووةم1 عاطهمع بعالام,8 : (وناطءم)0 58 > | !2 أبجد هون | أبجد هوز- أبجد هون أبجد هوزن أبجد هوز أايجدك ابد هون | ا 
لصق 7 نشخ ا 8 م [ة + عطه .؟*ا ©ير و3 معمره غرمطاد > 11 + 8 عادي 1 بلا تباعد عتوان ١‏ عتوان 7 عتوان 7 العتوات 2 عتوان قرعىي |2 5-8 5900-0 
3 305 مك35 5 أتماط لاقن | ب لل دل رزو تشيضت يي 22222222 م3 ختز| نيت تو يقني تضفر سفن 
لع ]آناط عنام ناه ب 
كا 11017701..11017157 197770181 .”اه ١‏ 1 7 10111 71 + 17ت 21107 :01لا نط1 : ا 
ععمةتامممم عاديا ”ير | . 1 28 
3 ممأددع ممه غلامينه زاح لك ثم الزر يروم في الأعلى على اليمين وستظهر الصفحة التالية: 
2 طود 1 غك ةامدمة 
- 600 غ53 أ 
8 منام عومميك ي © سدسس] !© سبد إح., © 
3 5ام”ع /زةامدال بي -1/مه20 [ وهام ) هامهةة 2.5.20 لداهمول: 
- 5 ونان 31غ5 نزةامكال كيد 4 0 . 0 3 
2 5ع وها بي 222221 عاب سحو سه ووس در 2 
: 15م7ء لع أمعمع) عرمووا ام ع ب 
- مسحظم 20 أعنة لسر ضيه ممعددة وحواب المابب (إليج094 5 © بعر 
3 عع؟نا50 لع نأمع مع عرمووا إنقاق لتحميل افد للسلسة متصددة وحدات ايت 000 ممتاتوي0 سا5 8015 نعم 
. امع اصمعم ممع ”ير | دعم 0 يعم 
- كاممع عاعقة كي | 
38 داهطماو ,عؤواوع, 2 | 
/زة1اة ومما عكاوم 22 لنوجيهات ينصح بن حا 
ا الوسع المي (مقجدط امت لابععل الا يعمل 
7 30017 و31 ع داوع | مب سم لسو لا تعمل يعمل 
رفع العلهات ( العام يعمل سمل 
ازقلالا بعغاث لاط لعمعييروم عمو كعأمنان عأوقدم 0 لامسمل بع 
غ5هطاةءه ا انا؟ كع غأمناو عأوهمم رسجو لرعددو وريد اال لمعم طعي 
١ ---‏ ع5ة طلز كع أمنان ءأوقمم دزت حص بوي لد رو 3 طحي 
ال عاطهمع 
5 امنا عا ي. 81300 بربامج "جر مضبوع العصدر" نم طرحه يعوجب 0/2© رخصة جبو السقومية 
معمم؟ اأنن بمروااد يد 
عدساءم: اس زاج أمر يجب تعديلها حسب طلب النظام وستقوم بتغيير الاعدادات الخاصة يوجمعمع بإهاموذ0 وازالة 
1 ألا مغن 0 كما في اعد إلى - 
تما.مكم [2] - 
آحولق عاءزن0 5 تت قد 
كعء ابمع5 اليش +51غ5 اس ناملا 2 
90 
كعع امرع5 ااث مرهغ5 3 
كعء اممع5 اا غروؤوع 8 - 
ات و نو 3 | كك العربية (اليمن) قاع د .روه قوعم 





,5 0 مم7 /00967 :ع |08 
ع .0 م طاععغ]. ثانالا نالا 





اتلك ت 160و اإطووة ا 0 00 ا 10000 




















"516 


نعود للصفحة للنظام ثم نضغط على الزر (إعادة الفحص) على اليسار أعلى الصفحة وستظهر الصفحة كما في الصورة : 





نف غ1 7 © « ينع تي 0 المأكماعمم ح نع أ مام ع 0ص ارده ةالمأكدا/ر132.5درهه [/أدهطاقءو| 5 | © © 
0 0013ل التثبيت ؟اإواممعه 592 
خطوات التنصيب فحص ما قبل التثبيت (1) إعادة اتقحص 6 انسايق سي ©) 
1 : اختيار اللقة 


قحص ماقيل التنبيت من أجل 1/17 © 14:00 11-2014:مه-30 [ ,ء طدمع ] عاط5:3 2.5.20 !0113مل: 


2 : شحص ما قيل التنييت إذا كان أي من هذه المتاصر غير مدعوم "أي غير متوفر” سيكون مكتوب 
باللون الأحمر (لا) عندها يرجى القيام بالإجراءات اللازمة لتصحيحها. عدم إصدار 5.2.4 << منرم 





| عمقل 0 
3 : الترخيص القيام بذلك يمكن ان تؤدي إلى عدم تثبيت نظام جوملا! بشكل صحيح. دعم الضغط باستخدام خاصية 216 نعم 
دعم لغقة التوصيف الموسعة 1لاللا نعم 
4 : تهينة قاععدة البيانات قواعد البياتات المعتمدة : 
و - (تأوكبزم راودبزم) 6 
5 استخدام لقة افتراضية متعددة وحدات البايت (أاناقاء0 5أ 30911396 | 0018) نعم 
5 :تهينة م[ إيقاف التحميل الزائد للسلسة متعددة وحدات البابت 07 01721030 وماأ5 0018 نعم 
دعم محلل 11/1 نعم 
6 : الإحدادات الرئيسية دعم 325001 ب 
مدام.0ه380 ناو 0م قابل للكتابة نعم 
7: الإنهاء 
الإحدادات التي يتصح يها: 
هذه إعدادات 810 التى يتصح بها من أجل ضمان التوافق التام مع نظام 8 
جوملا!. 0 التوجيهات يتصح بها حاليا 
ومع ذلك سوف يعمل تظام جوملا! حتى لو كاتنت الإعدادات غير متطابقة مع الوضع الآمن (ع1160 ع5د5) لا يعمل ل 
ما به. 75 0 

ع عرض الأخطاء (5/ممع /زةامواط) لا يعمل لا يعمل 
رفع الملفات (305واملا عا 5) يعمل يعمل 
زمن تشغيل الإقنباسات السحرية (008016ا8 01001525 عأو1/|3) لا يعمل لا يعمل 
00 525منا9 عأوةا! لا يعمل لا يعمل 
التسحيل العام (5ا3ناه|6 مع ذواوعجم) لا يعمل لا يعمل 
تخزين المخرجات (وممعأنا8 أناجان0) لا يعمل لا يعمل 
بدء الجلسة بشكل الى (51801 مأناث ممأودوء5) لا يعمل لا يعمل 
توفرة 212 خاصية فك الملفات المضغوطة يعمل يعمل 


1113© برتامج "حر مفتوح المصدر*” تم طرحه بموجب 81)/لالاات رخصة جتنو العمومية. 


كما نلاحظ الصورة أعلاه لم يعد هناك أي تنبيه باللون الأحمر لذا نواصل التركيب ونعمل كليك على (التالي) وستظهر الاتفاقية الخاصة بجوملا نعمل كليك 
على الزر (التالي) وستظهر الصفحة التالية: 





اسم - 957 اا . . ١‏ 1 575 . 9 9 - 
-_ ذف ا 7 © خا <« # ؟ القأكماعمم ح نع ا مطامعاء لو ا/رحصه 3 المأكصا/32.5 تمه [/دوهطاقها ذا © ىو 
وود - . 1 3 
ال ال ا عزوو هه 8 ١‏ 
.+ 5 5-5 6 
احتدر ان الستست تهيئة قاعدة البيانات 9 سين) اس © 
2 خا 
1 : اختيار اللغة 
إعدادات الإتصال 
2 : فحص ما ثيل التثييت 
المواقع التي تستخدم نظام جوملا! تقوم بتخزين كافة البياتات الخاصة الاحتدادات الأساسية 
0-0 بالموقع فى قاعدة بياتات.. هذه الشاة تعطى برتامج التتصيب المعلومات 
3 : الترخيص اللازمة الإنشاء قاعدة البيانات هذه. نوع قاعدة البيانات * 
: - هذه على الأرجح "للوكبرةة؟ 
< تيانة قاعدة اتيانات إذا كنت تقوم بتثبيت جوملا!! على خادم الويب البعيد (السيرفر الحقيقى). أاو5لاانا ؟ ى الارجح " /الياث/ز 
ستحتاج للحصول على شقذه المعلومات من قبل سيرقز الاستضافة. اسم انه * 
0 بعض سيرفرات الاستضافة تتطلب إنشاء قاعدة البيانات قبل تتصيب جوملا!. أو ااجع0| هذا عادة يكون "054 7ه 70 
5 : تهينه 10] إذا ظهرت لك الرسالة التالية * تعذر الاتصال بقاعدة البانات”: قم بالتحقق من 
أن اسم المستخدم وكلمة المرور صحيحتين: وفىي حال استمرت هذه اسم المستخدم * 1 
6 : الاحدادات الرنيسية الرسالة بالظهورء قم بالتاكد من سيرفر الاستضافة الخاص بك لمعرفة ما إذا 001 أي شىء مثل "7004و اسومر مسعخدم محدد من قبل سيرفر الاستضافة 


كنت بحاجة الانشاء قاعدة البياتات قبل تتصيب جوملا! 
كلمة مرور قاعدة البيانات : 1 
7 : الاتهاء إن استخدام ركلمة مرور خاصة بحساب أجكل[17/ يعتبر إلزامى من اجل حماية وامان الموقع 
0-1 5 .2 
اكت البيانات بعض مزودي الاسعضافة يسمحون ققط باسعخدامر اسمر قاعدة بيانات محددة لكل موقع. اسعتخدمر باذئة الجدول للتمييز 
اليا" ١"‏ بين أكثر من موقع جوملا!. 


وقى الاخير يمكن منع الدخول الى الموقع حتى يتهر اتمامر التثشبيت 
وهذا/ يستعمل من طرق محركات البحث ايضا اثناء عرض تنتاأنح البحث يمكن ايضا ادخال المفردات الرئيسية للموقع بينها 


بادئة الجداول * قواصل لتحسين الترتيب لدى بعض محركات البحث 
عا 1 2507728077( جأاء71 يمكن وصف محتوى المقوقع فى 
- خيارات : 





ادخل اسم الوقع ,ويستعمل ايظا من طرق محركات البحث لتحسين التريب لديها 


عمليات قواعد البياتات القديمة * 


©) التسخ الاحتياطىي سيتمر استقبدال جميع جداول النسخ الإحتياطى الخاصة يتنصيب جوملا! السابق 
إزالة 


3 برتامج "حر مفتوح المصدر*” تم طرحه بموجب 681/لالاا رخصة جتنو العمومية. 


نلاحظ البيانات المطلوبة أعلاه: نترك الخيار الأول كما هو الخيار الثاني وهو اسم السرفر الذي سيحوي الموقع الالكتروني »اسم المستخدم وهي تخص 
مستخدم قاعدة البيانات بالإضافة الى كلمة المرور. قاعدة البيانات وضعنا 1001212 وهي اسم قاعدة البيانات التي سنركب عليها نظام جوملا ويجب ان 
تقوم بعملها مسبقا. بادئة الجدول نتركها كما هي وهي أحد وسائل الحماية لقاعدة البيانات. ثم نواصل ونقوم بعمل كليك على (التالي) وستظهر بعد عملية 
الاتصال الصفحة التالية: 


: 0 00967 :ع اا08/ا 
أع .0 أم لاععغ]. ثانالا نالا 





اتلك ت 160و اإطووة ا 0 00 ا 10000 


00-5 


0 00113 ل التثبيت 'إوالصعصه 51 





خطوات التنصيب تهينة م77 6 انسايق هي ©) 
1 : اختيار اللقة 

تهينة 278] (اختياري - معظم المستخدمين يمكتهم تخطي هذه الخطوة - اضغط "التالي" للتخطي) 
2 : فحص ما ثيل التثبيت 











مع بعض سيرفرات الاستضافة من الممكن أن تحتاج إلى حساب 18 من الإحتدادات الأساسية 
00 إتمام عملية تنصيب جوملا!. في حال واجهتك صعوبات بعملية إتمام , 
3 : الترخيص التنصيب بدون حساب 25128, راجع مزود الاستضافة الخاصة بموقعك للتاكد تفصرل, خاضرة مجع * يد »و 
من ضرورية هذا الإجراء. 1 2 1 
دا 5 5 98 5 5 تحذير! من المسعتحسن ترك هذا قارغا وإدخال اسمر مسعتخدم حساب 787 قى ؟ 
4 حييكه وبح انواعت من أجل حماية وأمان جوملا!, يفضل أن تقوم بإنشاء حساب 18 منفصل مع | اسم مستخدم 19 را : 0 00 
صلاحية تقتصر على الوصول إلى تنصيب جوملا إفقط وليس كامل الموقع. 5 : ل ل 20 5000-6 
5 : تهينة 1ع مزود الاستضافة الخاص بموقعك يمكته أن يساعدك في هذا الآمر. كلمة مرور مع 0 من الستين تراك هذا قارغا وإدخال كلمة مرور حساب 77 / فى كل مرة تقومر 
. 5 / 1 / 00 
لاحظ ذلك: فى حال كنت تقوم بتنصيب جوملا! على سيرفر ويتدوز, فإن 5 
9 9 مسار جنر 12 
6 : الإعدادات الرئيسية خاصية 12 غير مطلوبة. : : 0-5 
إيجاد تثقائي لمسار 10] | | التحقق من إعدادات يروتوكول تقل الملفات 276] 
7 : الإتهاء 
الإحدادات المتقدمة 1 
50 
٠‏ . 01 مي مو 4# مي 0ى 
ايضا نقوم بعمل كليك على (التالي) وستظهر الصورة التالية: 
ما ٠‏ آيم] - آيم] 
2# حَ ك1 ل و # - 
- نف 1 7 © خا < 4# 2 #| اق أكماعمم ح بنع أ/ م امع 0ص أ/رصه 3 المأكمت/ر32.5 انهه ز/أكوطاقءه| ذا © © 
ده ة 5 6 م 0 
ا ا ا إمأووه «أاشافا 
+ 5 عه 3 5 
جب نسدد الإعدادات الرئيسية © سيق | .سب ©) 
1 : اختيار اللعة 
اسع الموقع 
2 : فحص ما ثيل النثييت أدخل اسم الموقع. _ الكتاتك 
إختياري: يمكنك ايضا إدخال البيانات الوصفية والكلمات المفتاحية الخاصة الاتدادات الاساسيه 
3 : الترخيس با 5 د ام + ١‏ : ا 
اسم الموقع رواد التكتولوجيا | 5/م210788 /[) 
4 : تهينة شاحدة البيانات الاحدادات المتقدمة - إختيارى 5 
5: تهينة 1[0ع] 
6 : الاحدادات الرئيسيه 
أدخل بريدك الإلكتروتي. والذي سيكون البريد الإلكتروني الخاص بالمدير 
59 العام للموقع (01أ53 تلم ععمرلاة). 7 
5" - 6 5 د د 
دي دخل كلمة مرور جديدة ثم قم بتأكيدها فى الحقل المتاسب. يمكتك تغيير بريدك الالكتروتي 2119000113117 نالا لاع 
اسم المستخدم الإفقتراضي. (يتصح به بشدة من أجل الحماية والآمان) : 
1 . وشما سيكوتان اسم المستخدم وكلمة المرور الذين اسم مستخدم المدير * إيالئياككت 
ستستخدمهما للدخول إلى لوحة التحكم المدير في بعد الاتتهاء من عملية 
ٍ 1 5334 
القتصيب . ْ كلمة مرور مدير الموقع 0111100-0 
إذا كتت تقوم الترقية من نسخة سابقة, يمكنك تجاهل هذا القسم. 
الاعدادات الحالية سيتم ترقيتها تلقايا. تأكيد كلمة مرور مدبر الموقع * مممممفققة 
تحميل الييانات التموذجية 
هام؟!: تنصح بشدة +مبع مستخدمي جوملا! الحدد القيام بتنصيب البياتات ١‏ 8 2 5038 7 
التموذجية. للقيام بهذا اضغط على الزر السابق الانتقال إلى المرجلة البياتات التموذجية (68) المدوتة باللغة الإتكليزية 
القالية. مجموعة البيانات التموذجية البياتات التموذجية (68) للتشرة باللغة الإتكليزية 
) البياتات التموذجية (68) باللغة الإنكليزية 
1- البيانات النموذحية: قبل مغادرة التنصيب, يمكنك ملء قاعدة بيانات دي ا 2 
الموقع بالبياتات.. توجد طريقتين لعمل ذلك:. - 5 د 
تم تنصيب البيانات التموذجية يتجاح! 
1.- البيانات النموذحية الافتراضية يمكن ان تستخدم. للقيام بهذا, 1 : ١‏ 
البيانات التموذجية باللقة الانكليزية الافقتراضية(68) موجودة فى القائمة تنصسيب البيانات النمودجية ينصح يه بشدة للميتدئين. هذا سوق يقومر بتنصيب المحتويات النمودجية والذي ته رتضمينه فى 
المتسدلة: ثم اضغط على زر تتصيب البيانات التموذجية الافتراضية. حزمة تنصيب جوملا! (اي الأقسام والمجموعات والصفحات والقوم والروابط والصور.. الخ). 
2.- البيانات النموذحية الخاصة يمكن ان تستخدم. للقيان بهذار قم 
ا باختبار اتات تموذجية متاحة مر القائمة المتسدلة: اضغط عله , زر تتصب 


من خلال الصفحة أعلاه نقوم بتعبئة البيانات الحقل الأول (اسم الموقع) ونكتب فيه اسم الموقع الذي نريده ثم ننتقل للمجموعة الحقول التالية ونكتب 
(بريد الكتروني) أي بريد خاص بنا. ثم (اسم مستخدم المدير) وهو الاسم المهم وهو اسم تسجيل الدخول للمدير ثم كلمة المرور مرتين. 


في الجزء (مجموعة البيانات النموذجية) وفيه نقوم بالضغط على زر (تنصيب البيانات النموذجية) وهي بيانات افتراضية موجودة ضمن نظام جوملا. ثم 
نضغط على (التالي) وستظهر الصفحة التالية: 


,5 0 مم7 /00967 :ع |08 
ع .0 م طاععغ]. ثانالا نالا 





اتلك ت 160و اإطووة ا 0 00 ا 10000 














5١ 


0 0011131 ل التثبيت 


!هع © هاش | 





خطوات التنصيب الإنهاء 49 المرتع لفن 
1 : اختيار اللقة 
ميروك! لقد تم تنصيب تظام جوملا! يتجاح. 
2 : فحص مأ ثيل التثبيت ْ 
اتنقر على زر ”الموقع” لمشاهدة موقعك بنظام جوملاا!ء او على زر “الإدارة” 
57 لالإنتقال إلى صفحة دخول الإدارة. 
3 : الترخيس 
على موقع محدمع جوملا! (/111ل00101© !100713): سوف تحد لائحة روابط 
0 لحزم اللغات المتوفرة وكذلك روابط للموارد المتعلقة باللغقات فى عائلة 
بيد كا اوتا مواقع وىه.1/3ه100, 
اضغط على الزر الموجود على اليمير فع مجتمع جوملا! فى تافذة 05 : 
مي ا ونا و1 1 قام حدل سن أجل إكمال عملية التنصيبد 
يحب عليك القيام بإزالة محلد التنصيب "11521313011" بشكل كامل. 
لن يمكنك الوصول إلى أبعد من هذه النقطة إلا بعد إزالة مجلد التنصيب. 
هذا من احل حماية وامان حوملا! 


| يرجى إزالة مجلد التتصيب | 


5 تهينة م0[ع] 
6 : الإحدادات الرئيسية 
7 : الإنهاء 

تفاصيل تسجيل دخول الإدارة 


اسم المستخدم لقاعدة البيانات : 3013319 


؛حوملا! بلغتك الأم؟ 
قم بزيارة موقع مجتمع جوملا! (/171ناةااله) !100713) لتتزيل حزم اللغات 





13 برتامج "حر مفتوح المصدر* تم طرحه بموجب 81)/لالاات رخصة جتنو العمومية. 


نقوم بالضغط على (يرجى إزالة مجلد التنصيب) ننتظر الى ان يتم ازالة المجلد وتأتينا رسالة من الزر نفسة (لقد تمت إزالة مجلد التنصيب) ثم نفتح 
نافذتين واحدة للزر (الموقع) والثانية ل(المدير) 


سيظهر الموقع كما في الصورة: 


> يها نف ا 7 © « لخ خه مب 


/2.5 0 / ولاق ذا © 


لاع5831 ؟عالقتم 5‏ أعففط يعووا5 عدأو أممط 


4 001ل 5!!5 غاداناام5 فللقلي 


© أوعو ©3236 


3120617111 ]ا أاع]201) ععانام5ت رمعم 





ع0 :عرع ا ع3 ناملا 


!3 رمه[ هه[ غناهمطم 
ا معع! 300 ]1 3011ثالا ناملا بإونثا 1 أكناز عأأقطعنالا 3 لآاناط 0غ تزقوع 1 773185 013ممل إعغ51 2انمممل 3 عتنتقط ناملا !20119121341005 530 وولغاء 6 


13117 300 ع0318منا 0غ عامدماة 9" وميا 
!0013ل 00ا5 
05 07805اناط اغالا عغأ5 عوناط 3 6ه أاعةاناملز 10 عغأ5 5533/1 3 0159ااناط 36 ناملا تعذااع ثانا ,3010م انلع نثامم 300 عاطالاع1ة 3 15 داصصممل 


.10 1 غ311ثلا ناملا /إقثالا 118 أ5ناز »أ]منلا أ |5713 3/7ع ناملا 7783115 تاأعاحانلا ,بعع]نامة تاعمه0 15 013ضهمل 1505 01 11010531105 عو زه" !3 ادرومل 156 


م11نا20) !دالوممل ع1 








35 ]0655م 5ع 30م ملا 15 لراعءع8 
' 1 57 511 ولط 
1211م ماععل0 قعنالتاممء 2.5 !داومل !3اتصممل لععرعلمعمناع 30 ع3 ناملز ]ا 0 5118 !3اتصممل 156 ناملا 5آ قاط ]ا 
5 300 عارمنلاع مقط دالوممل عط أه 0 اأاأنلا عغا5 713ممل ؤاطا ,)عونا 1.5 8 31/8 ناملا ,عأأة لاعنلا ]115 آناملا 0 01 
0غ اقنلا عاطالاع11 300 انلع /لامم 3 35 لاعن ع3 عرعط١‏ -31االصدا مع ماعط ااانا 3الصممل ععقام أطاوك عط 16 
0 طعننا عط أ0 0مأذانا ]ناملا واارط ؟5نا 01/80م157 300 5عغ36امدمع1 0111711110 300 هنا 8غ511عثالا اناما أن ناملا مدال عات 
- /010 513101 1ات 30 عط طغالاا _بتاضزاهع 5 /01031||3لأع انا 77051 ألاط _بوعع د رع اما لاأاققع 300 /إاكاع اناو عتمم ١‏ 


0 /00967 :ع اا8 0لا 


.0 م طاععغ]. /انانانا نالا 


توه وت زو المووة 2 00967 :2 عا اا8 ١/0‏ 





56 


صفحة لوحة التحكم كما في الصورة: 


0ط أ 2.5/3 مهو [/أدووطاةو| ذا © © 


2 ها ف 5< 7 © « ل 4ه د 


11100 0010م 


0 ا 801111111511211011 !13زم 6ل 


3551/00 300 ع778317ع5نا لأأقلا 3 ع5لا 
011513101 16 10 ك5قععع3 9310 10 


3" رعولا .لمعاعق6 
.50م ١1018‏ 5116 10 0 
10مثثاة 35م 
؟ 4انموقع0 200 
6 0 1090 





.ع5لغع نا عتألطسط اقععمع0) لاا ع عع0لنن لعقوعاع, عرق ,أ مواعع؟ 5ز هلقاروول 


تعريب نظام جوملا 


قبل البدء بالتعريب نقوم بتنزيل ملف اللغة العربية من موقع جوملا الرسمي من خلال الرابط التالي: 


11-503 22612366 _5 لاع 151:0735 115141625 -11011 6/11/2926 1/21:0166©1/111:211:512610111ك/»:*11]0://10011:126001©.01آ1 





بعد الدخول على الرابط ستظهر الصفحة التالية: 





| انعاناط | ارا تاف || لبن كاتف || طين تيف || لبايك | بلي ت: || اللنيكان لكان || اجلنياكافا 


"هون أاصمهة 1 ؛ ” 


6 1 حكم/ باط ممع امم 
نم3 لاعن رع أكلوع8 | لزوما © 0( هش تارمت | 0225 | (ركسييتك كنك كن كسان تكن اعياكت 





عدوعاع مه دع عورامع8 +« شقخرة وهالامنا عأطمعمق < دوعدوعاعع <« كممناأواكدة! لعأألعوءة 2.5© إذاأنومه1 « 5اععرزمعم <« عروومنم اارحاساف»ت نويا 


5 لع 1لع 8621 210011113!952.5 سدس الاين 
60010 << 


026 عمصماماة + دن ممصطة 00 























21200 8 323.25 0 2.5.911 انز وضها_ نادمه فشكف ىد 17:00:00-06 2013-02-03 9 ققد ودأتونا عتطديم ادلالا موده << 
10431 8 325.34 م2. 2.5.81 اانة ومها قادومهز قفد 17:00:00-6 2012-11-08 8 ققد وداأتونا عتطميق 
841 © 285.13 .2.5.201 انق ومها_قاصومهز ففعج 18:00:00-5 2014-04-29 0 شقلءة وطتهنا عنطصم حخطنا نه 
62031 8 323.94 0. 2.5.191 اأنة ومها_قادومهز قفد 17:00:00-6 2014-03-05 9 قل“ة وداأتونا عتطميم و80 << 
4405 8 323.76 م2. 2.5.1801 اأنة ومها_قادومهز فف د 17:00:00-6 2014-02-06 8 30-584 وهاأتونا عتطميم وي 
5969 8 323.84 20. 2.5.1711 أأنة 060قا_ذاتوههوز فف جد 17:00:00-06 2013-12-18 7 شلثق-”د ودغتونا عتطهيم 
3249 8 323.61 م21. 2.5.1611 أأنة نذا ذاحومه[ شف دج له لسعو ساس ست تق الاك << 
3061 8 323.84 .2.5.162 اانة ومها قادومهز شف د و 0 ا ل سارك 
118449 8 323.62 20. 2.5.1311 أآأنة 060ذا_ذاتومهز شف جح 18:00:00-05 2013-07-25 7 قلذ-0دت ودغتونا عتطديم 
14389 8 323.48 20. 2.5.1111 اانة ومها_قادومهز شف د 18:00:00-5 2013-04-26 1 شث-نة وداتونا عتطميم 
1231 8 323.5 18:00:00-5 2013-04-23 0 كشقم-وة وذاتونا عتطديم 001 
4729 8 295,22 م.2.5.13 انق ومها قاددمهز فج لاا 5051109 
11479 8 325.16 م20. 2.5.7101 آأناة نذا والومه[ فف- جح حصو 
1155 8 880.41 م2. 2.5.511 آأنة 00ذا واأحومه[ فث- جح 18:00:00-05 2012-09-19 5 شقذ-عمد ودغتونا عتطديم برع بزر0 06 
4/016 8 285.1 م2. 2.5.411 آأنة نذا _ذاتومهز ففق جح لام ا ةا 
528 8 300.85 .2.5.6101 اأنة ومها_قاومهز فف )د 























من خلال الصورة أعلاه نقوم بتنزيل الملف المضغوط للغة العربية باختيار أي نسخة ولتكن آخر نسخة المضللة ونضغط على ذلك الملف وسيتم تنزد 
الملف المضغوط. 


0 /00967 :ع اا8 0لا 


اتلوك اه زوفكتا 
علوت اك 0 قف لفن 2 /0096 :2 ع اا8 0لا 


اتلك ت 600و اإطووة 





م" 


من خلال لوحة التحكم نقوم بالدخول باسم المستخدم :20:21 وكلمة المرور التي عيناها مسبقا وسيتم فتح لوحة التحكم التالية: 


'إوامرحه 22 


0001م 





أنه وما 9[ عتك سعاما 1ه 0 “ع منملخ 1 لله 5مه::دز/ا 0 يلك 


ماعلا للك 3120| 000011015 00011 5 تاداع الا دمع 5لا 5116 
9 امسا 
15ع5لا متالعووما! 5 غ135 + . 5 |0 ح 
ل ١‏ 
00011 1 اناعم 1351 ا 060 ةا مما 6 
5 2014-05-04 19 بر !ع5 معمناة ١13030,‏ نامع انا ؟ 3030 وألع اا ١/3030,‏ مومع و0 3030 عاع نايف عاعنمث باعل للبثر 


5عاء نظ رداننامه2 5 م10 < 
5عاء نمق ل0لع2800 355 | < 


36 | © >< له 


0011010 اوها ١33021‏ 130010030 !3030| لمأكمع رع 30301 عاناله! ؟ ١3030‏ ,ع5نا 
1 : 0 أسيم م مسسمة 
-منا ع3 كممأكمع تزع ااثر ع031-م0أمنا 15 !0013ل عاقممط أألع 308302 عأةاملرع 11 
10-031 


0 إوالموول 


.عكلععنا عالطنط لقععومعة لاأاات عط ,ع0لنن لعقهوعاع؟ ععق/ مو ععم]؟ ذز هلق|رحروول 


من خلال الصورة أعلاه نقوم بالضغط على (ماع 1121226 011 1كررء)::1) ووظيفتها اضافة اي اضافات للنظام وسيتم فتح الصفحة التالية : 


الهاأكضا :11311301 05101))اع 


201205 الهأذوا 111105 الا 11125 0150 1/1220 02م )كما 


اا عوهعاءج2 0دماملا 


القأدما ج 0دمامنا مععمق 516 مز | “لكزحوتيتة عااع عوواعهم 


لاأماأععزأنا دصمع] المأكما 


المثدما مجم غ5 2ه احممه زاوحوحورام موسا لإاماعع]آنا القأ5ما 


اانا دصمع] الدأذما 


المثدما نمام اانا القأدما 


من خلال الخيار (»1711 ©1386ع23) من خلال الزر (17116 ©0120056)) نقوم بعمل كليك عليه وسيتم فتح النافذة ومن خلالها نذهب لملف اللغة الذي قمنا 
بتنزيله والضغط على الزر المقابل (1254211 ع3 1171020) وستظهر الرسالة التالية: 


005 ا1تأ5 ما 1115لا 0202225 015011 1/1220 0م00 الهأذما 


.اناأةةعععناك 5قثلا عووعاعوم وص ذالهادما ىق 


حرّمة اللغة العربية الموحدة لنظام جوملا! 2.5.10 الاصدار 1 

1 6151017/ا 2.5.10 !001713ل 701 06 قتعاءع23 3170114306 ا 3130انا عأطقرظ 
المعتمد في جوملا! 2.5 3 1/101/إ1110 تم يتجاح تنصيب حرمة اللغة العربية للمحرر 
:110/110 -في خانة اللغة عند ادارة التطبيق المساحد المحرر ]3 تذكر أنه من الواجب انخال كود اللغة العربية 


عااء عوقاءج2 50ماملا 


المأدما هج 0دوامنا معومط عا8 هلا | عااع عوممج | ع2 ع30اعوم 


: 0 /00967 :ع اا08/ا 
1ع .0 م طاععغ]. ثانالا نالا 





اتلك وت 160و اإطووة ا 0 0 00000 


ه ؟ 


نقوم بالرجوع للوحة التحكم من خلال (72121 00111:01) - 9166) ومن خلال لوحة التحكم نقوم بالدخول على (1ع7121228 ©1128ع1,2118) كما في 
الصورة: 








'إبعالمعصمه 7 0110م 
ناه 109 0 عان5 باعأاا له 0 عا ملولث 1 7 0/15 2 ماعنا نان حانت 3 3 | 00010015 000111 5 ناوع اا 5م05 516 
ل 
5ع 5لا ١أ-لع09090 ١3545 ١‏ + 1 8 )ا حت 0 ع 
00011 1 الالاع8 1851 10 000 ع3 ال-ندم ص 0 


3 2014-05-04 19 1115110 لبر ”ع05ا ,عمناة »13030 نامعانا 330 ولع انا 30301 بصموع 1ق ,13030 عاع اميش عاعتمم رازعل! لمر 


5عاءع1ث8 عدانامه2 5 م10 < 


5عاءع8)1 0ع800 55ج | < 
الللسشدا 
6 | 6 0< يه 


00011010 أقها0 3301 3001030 !3030| لمأكفمعتمرع ١13030!‏ عانانلهانا ,13030 عونا 
5 35 ْ 
2 ا 
-منا ع3 كلمنكوع تزع ااثر ع0-031أمنا 15 !0013ل عازممم أزلع ١305021‏ عأةامممع 1 
10-031 
مو »4 مي فى 5 
وستظهر الصورة التاليه: 

016105 0011 21111115112601 - لعالدادوا 51 - لعاأهادما 
اتقدلعط «مطلأناكظ نام 036 11ماعلا ]اناة؟أع0 41017ق0 1١‏ 130 30010130 ا 30130 ا انالا 
4865)001101111311.60117 بالاع 18321 / مه .0111311 01.0.35113100 1 131111 300 1031!! ناطث/0311:3] 31ذاكث .101 2013 أعقاا 28 10ظآ2 51 شظرثر- ]1ح (العربية الموحذة) 0139لا ع1قمش 2 () 1 
30111600[001113.010 أععزوعط لوارومل 2008-03-5 2.9 5 516 8ترع (00000كا لعاتونا) طدناومع 2 () 2 


* 20 # برقامدزم 


من خلال الصفحة السابقة نقوم بالضغط على النجمة أمام اللغة العربية وسيتم تعريب الموقع الرئيسي وستظهر الرسالة التالية: 


]ع0 001 8111115112101 - لعالهاكما 51 - لعالهادما 


.0هم لأوه!ا ع5 صمعه ع111ممم عتعطا نه عوذناوصها عاأاععم5 ه معومء عتلهط 118814 دنع كنا أعع311 5014 5ع0ل 1115 .ل0ع5310 ع30نان30 ٠‏ أاناواع0 ىق 
.01130ة! أمعغأنره6 لع ذ[ذذاطنام 3 عط 3]50 0غ 135 001030ق ا أاناواع0 518 215 (لعاطووع 15 ,عغ!11ع0دناوقها - تمع51ئز5 لأوناام ع3 معان ,ع.١ا)‏ بواالهوه عونا عندناوصقهاأانا ع5 وصتأكن معطالانا إأوصنتحصهلالا 


اقرع «مأأناظ نام 036 5101معلا أاناةاع0 410197ه0 1 130 3000030 ا 131101130 سلا 
.48600110111311 بالاع 3:1 / 117م.|01.0.351316901131 1ع 31 30111؟! 300 1031! نااظ/0317:3) 11817اكث .1( 2013 أاءقا!ا 28 250 5-2 516 ثرث-]ح (العربية الموحذة) 0139لا 3ش () 1 
83011109[001113.010 أععزوعط لوالروول 2008-03-5 25.9 5116 قارع (000ومتكا لعغاونا) طدلاومع 2 () 2 


“" 20 # بإواموان 


,5 0 00967 :ع اا08/ا 
ع .0 م طاععغ]. ثانالا نالا 





اتلك ت 160و اإطووة ا 0 00 ا 10000 





هه" 


وسيظهر الموقع الرئيسي كما في الصورة: 


حجد الخط أكبر إعادة الضيط | ٠‏ مخز البحت... 


لالز 5غ !اذ غاماللم5 0011ل 


[|[© أو © ©9036 


12120111111 أصع011م2) ععانام5ت وعم 





آنت هنا: 81000 
03[ غنامطقم ! 003[ ! 
5310 ومنناء 6 ا معع! 300 غ1 1/3111 ناملا بإقثالا 11 أكناز أأق5عنلا 3 0آأناط 0غ بزققع غ1 77315 01713مل !عغ51 0713ممل 3 عناقطا ناملا !201101310136105 


1 300 ع031منا 0غ عام(زاة. 
3 وراولا! 
05 07205اناطا للاانلا عأأ5 عوناط 3 عه أأعسانامئز 1051 8غأ5 القحدة 3 00ألأأناط 368 ناملا تعطااعطانةا ,هدام ابأعتلامم 300 عاطلاع1؟ 2 15 داحصمول 


أععزو] لهادروول 156 0 ١‏ 111ةثلا ناملا /إوثالا 11 أؤناز كاملا )ا |5713 317ع ناملا 7763115 تاأعاتانقا بعع]نامة لاعمه 5ا 0013ل .5م زوالا أه 53005نامطاا. 


لاااصستصتصمة) اجاصصممل عط1ل 


تم تعريب الموقع وظهور بعض الاجزاء معربة جاهزة. ننتقل لتعريب لوحة التحكم ومن خلال الصفحة (1ع712128 ©132251128) و الضغط على 
(1511:2601 ندر 4 - 125621160 ) وسيتم فتح الصفحة التالية: 


5 ع0 م001 211115113101 - لعاادادما - لع5)211ما 
القنوعط عمأأناكظ نام 031 ممزوععن/ا اانسوقع0 إرزك »| 000 131101130 انالا 
/ 601771 .01.0.351131690113[1 11ل1ة؟ا 300 اقل1! ناطظ/03113) 1قذاعث .]لا ١لع1ق‏ ا 20 و .ده 8 
5 251 ا رار (العربية الموحدة ١‏ شر 
.4860110111311 راع 11 013 لاع قالمع 2013 29 لوعو عت شر جرع احيع وروا د : 
320111110[001113.010 أععزوعط لووول 2008-03-5 259 01 لخر متتارع (4000010! ل0ع1ونا) ادتاودع 2 


١‏ 0 #8 /زقاموانا 


وبنفس الطريقة السابقة نة م بالضغط على النجمة أما اللغة العربية وسيتم تعريب لوحة التحكم وستظهر كما في الصورة: 


'إوامصصحه م 51 





الموقع المستخدمين القوائح المحتويات التطبيقات الإضاقات المساحدة ا لايوجد أعضاء داخل الموقح كه 1 عضو داخل الإدارة >) لاتوجد رمائل 8 معاينة الموقج ([ تجيل خروج 
0 3 41 3 4 
مدير اللغات: اللغات المنصبة 1 1 للم .»> 
7 . 
الاقتراضصي تتصبيب اللغة الخيارات المساعدة 
الئقات المتصية لنواجهة النقات المتصية لنوحة التحكم لات المحتوى التخط 7 


2.9 0م لرأوه! 5غ حم عه ع11أمعم عتعطا مره عنهناوصها عاأاععمه شه معومطء عتلهط 11331 ماع 5نا أعع311 004 5ع0ل ١١15‏ .0ع13ة5 30نان380 | أاناداعا. 
2 30! أضصعغنره) لع[ أاطيام 3 عط 350 10 135! 38001030 ا أانلوقع0 5118 5غ (لعاطووع 15 نعغ!11عندناوقها - دمع51ئز5 لأويام ع5 معطنا ,ع.ا) بوالقمم0لعون؟ عندناومداتأاناحه ع8 ومتلعن معطلائا إأوصنتحصهلائاء 


أرقام اللغة كود اللغةه المكان2 الاقتراضي)< النتسخة تاريخ الإنشاء المؤلف اليريد الإلكترونتي للمؤلف 
1 1130 عزطقعث (العربية الموحدة شرثر- 31 لمذير 5-5 25.0 8 2013 طاعروانا لاع قمع 21 ق>ا 300 1031! ناطاث/03113] 31 ذاكث .]نا 00110111131|.607) 4865 /الاع 1331 / 111م6 .0111311 01.0.35113109 
2 1 لع غ1منا) لادتاووع) 8ع العدير 259 2008-03-5 أععزوعط لووول 010. 3011100001113 


عدد أمطر اللائحة: | 20 آي 


0 0013ل 


0 /00967 :ع اا8 0لا 


أ 0.1 د حاعع]. الا /الا لاا أعم.وأم داعة0©1)م1 :انمع 772755202 2:00967 || ١/08‏ 











نعود للوحة التحكم من خلال (الموقع - لوحة التحكم ) وستظهر لوحة التحكم كما في الصورة معربة وجاهزة: 


ون” 3 





'إبارصعصحه 51 


الموقع الستخدمين القوائح المحتريات التطبيقات الإضافات المساعدة 


مله لايوجد أعضاء داخل الموقع 2د 1 عضو داخل الإدارة )| لاتوجد رمائلن © معاينة الموقع [© جيل خروج 


00 يح > لكر 5 أعضاء قاموا يتصبيل الفكول 
1 لا 0 


الاسح المكان 





رقم التعريف التشاط الأخير تسجيل الخروج 
هدير العقالات مدير المجموسعات هدير الومائط المتعددة هذير القوائم مدير المتخدمين :ع5 ,عمناة العدير 19 2014-05-4 17:25:07 


4 أكثر 5 مقالات قراءة 





4 آخر 5 مفالات مضاقه 
-_- 1 
550000 مدير الإضافات مدير اللغات الإعدادات العامة هدير القوالب تعذيل العلف الشخصن 
لديك آخر نسخة من جوملة! لديك آخر اصدار من >( 


الاناقات- 
الإضافات 


0 لوالمومل 


لوحة تحكم جوملا 


من خلال لوحة التحكم ندير محتوى الموقع كامل سواء أجزاء المواقع واعداداتها وكذلك شكل الموقع والتحكم بكل جزء فيه وهنا نظرة عامة حول كل 
أيقونة في لوحة التحكم حسب الترقيم وكما في الصورة: 





|5 27 (© 84 دم 











أصضناقة فقال حتيد مدير المقاات مدير المجقوعات قدير الومائط المتددنة مير القوائح هذير الستخذسين 
١ -‏ :! فت سس أسصض إسصس 
مدير الفونيولات مدير الإصاقات مدير اللّقات الإعذانات العامة 


مير القوالب تطيل العلف الشخصبي 





لذياك آخر تسكة قر حو هاتآ تنك آخر أصنار هس كل 
ا اال ل ع ا سياس 9 ل قلع 


نت - 1295 هس 
أ صضباقاته 


(إضافة مقال جديد) : من هنا يمكننا إضافة أي خبر أو بيانات لأي قسم. 


(مدير المقالات): من خلالها يتم الدخول إلى جميع الأخبار أو المقالات المضافة في حالة اردنا التعديل أو الحذف. 


,5 0 /00967 :ع اا08/ا 
اتاو لوكت 1 | 0000 
تلك ت 160و اإعووة 





2 /0096 :2 ع اا8 0لا 


/اه ؟ 
(مدير المجموعات) : من هنا نقوم بعمل القسم وتسمى في جوملا(مجموعة). 
(مدير الوسائط): من خلاله نتحكم بالمجلدات والصور في مجلد (11128©5). 
(مدير القوائم) : نتحكم بالقوائم الموجودة من هنا. 
(مدير المستخدمين) : نتحكم بالمستخدمين من هنا نقوم بالإضافة والتعديل والحذف والايقاف. 
(مدير الموديولات) : الموديولات هي أجزاء الموقع ونتحكم بها من هذه الأيقونة نستطيع تحديد أماكنها ومن أين تستمد بياناتها. 


(مدير الاضافات) : جوملا تقبل أي إضافة سواء موديولات او مكونات او اضافات مساعدة وعن طريق هذه الايقونة ندخل للصفحة التي تقوم بإضافة 


الإضافات وتركيبها. 

(مدير اللغات): نتحكم باللغات للموقع ونستطيع تعيين اللغة التي نريدها للموقع وللوحة التحكم. 

(الإعدادات العامة): نتحكم بالإعدادات العامة للموقع مثل (اتصال قاعدة البيانات - اسم الموقع العام - ايقاف الموقع .. الخ ). 

(مدير القوالب) : نحصل على قوالب جميلة من مواقع تدعم جوملا ومن هنا نقوم بعملية التعديل والتعيين للقالب على الموقع. 

(تعديل الملف الشخصي): وهذه الايقونة خاصة بمدير الموقع لتغيير اعدادات حسابه. 

(لديك آخر نسخة من جوملا!) هنا تظهر هذه الرسالة عندما تكون جوملا لديك آخر اصدار وعند وجود تحديث جديد ستتغير باللون الأحمر (تنبيه). 


(لديك آخر اصدار من كل الاضافات) تظهر عنا عدد الاضافات التي تكون بحاجة لتحديث ويفضل عدم تحديث الاضافات غالباً. 


0 0 00967 :ع |08 
لعلله . اة وكت زو “اإطفوة ا 0 00 1000 





"/ 


عه 


إنشاء الاقكسام 

في أي موقع إلكتروني لابد من وجود جداول خاص البيانات هنا في جوملا الأمر سهل جدا ويمكننا إنشاء الجداول بالمعني البرمجي ولكن في جوملا تقوم 
بعملها يدويا وتحدد اسم الجدول فقط فمثلا سنقوم وكمثال نقوم بإنشاء أقسام (قسم تصميم الموقع - قسم الجرافكس - قسم الشبكات والصيانة - عام - 
خدماتنا ) والخطوات كالتالي: 


من لوحة التحكم نختار (مدير المجموعات) وستظهر الصورة التالية. 


59 مدير المجموعات: المقالات © © ! به 0 © 0 56 
جد تعديل تشر إلقاء النث الأرثية 5 إعادة يتاع الخيارات الساعدة 





المقاالات المجمو مات المقالات المتميزة 
القتتر البحت | | إعادة التعيين - اختيار أعلى حد للوصول _ ” | | - اختيار الحالة -_ ” | | - اختيار مستوى الوصول - ب اعد ككف 
الاسم الحاله | الترنيدا 5 مستوى الوصول اللغه م التعريف 
5ع اع أأريف-0313] 1م53 © 1 نم الجميع 14 
(الآسم الستحار: 5عاع0313-3101-ع16م53101) 
013 ! 
5 1 © 1 و عناطنام الجميع 19 
([الاسه عار: 0011113() 
5 0000 
© 1 انام جيم 0 
) تعار: 51005مع ]لزع ) 
02010012115 
0 © 1 ل عزانم لجيه 1 
(الاسم المستعار: 115 ع6010011) 
5ع اناه انا © 2 © 6 مانام الجميع 
١‏ 5ع70011) 
انالها/! أمعام 
5 انالهام] أمعامم6 © 1 0 عناطنم لجميع 64 


(الامسم الستحعار: جع1ن1ل00مععاء1اة) 


كما نلاحظ في الصورة اعلاه هذه ادارة المجموعات أو الأقسام ونلاحظ الأقسام الموجودة مسبقا (بيانات تجريبية) نقوم الان بعملية الحذف والتأشير كما 
في الصورة على (1001212) ثم الضغط على أيقونة الحذف أعلاه. ونقوم بحذف جميع المجموعات أو الأقسام الى يصير لدينا قسم واحد وهو كما في 
الصورة. 


3 2 عرازة ى: ١ ١‏ - 55 
الفخصر. حداف اعاذه بناع الخيرات المساعده 


759 مدير المجموعات: المقالات ©6 © 6 60 ٍ/ جمد 4 © فلن ٠ه‏ 


المقالات المجموحات المقالات المتميزة 


و 1 تم نتل المجموعة الى سلة المحذوقات يتجاح 


الفثتر البح حادة الت خنيار أعلى حد للوصول ‏ ” اختيار الحالة - ” | | - اختيار هستوى الوصول - “* | | - اختيار اللعة , 
الاسد الحالة عه | الترتيب 5 93 [ء 1 اللغة د التعم بف 
حر .2 مسنوى انلوصول وكم الشهري 


0000050 © 1 اأطناهم : 9 
5 الجهيم 
) ر: 8001150 هع انا 1 


عدد أمطر اللائحة: | 20 و 





١/0811: 00967 #0 11‏ 
اه عت أعم.هأمحاءعع]0©1)م1 :اهمع 772755202 2:00967 8|115 ١/0‏ 


ولعمل الأقسام التي نريدها نقوم بعمل كليك على الأيقونة البرتقالية أعلاه (جديد) وسيتم فتح الصفحة التالية : 


الإدارة 'إعاصمحهر 5 





2 لايوجد أعضاء داخل الموقع 7 1 عضو ذاخل الإدارة ََ لاتوجد رمائل © هعاينة الموقع 0ه تسجيل خروج 


ير ا نات ف هن عقا ادم باغ 4- 1 3 
الشموئع 2س داك لمواسم سمس لالم شالك لات الست لع 


ع مدير المجموعات: إضافة مجموعة جديدة ئي 0 6 © 9 


حقظ حفظ وإشامق حفظ وجذيد المساعدة 


التفاصيل 
4 خيارات التشر 

الاسم * تصميم المواقع الإلكترونية 4 الخيارات الأساسية 
الاسم المستعار موأدء لطع 4 خيارات الكلمات المقتاحية 
لأصبل - يدون اتاب ؟ 
الحالة منشور آي 
مستوى الوصبول عأاطنع ؟ 
التراخيص تحذيذ التراخيص 
اللغة الجميع 7 
رقم التعريف 0 
لوصف 

> تاموءووءده > وعارةز5 | 5 5 ع ع | عم ن م 8 
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كما نلاحظ الصورة أعلاه من هنا نقوم بعمل الأقسام الجديد. من خلا الحقل (الاسم) نقوم بعمل اسم القفسم, الحفل الذي يليه (الاسم المستعار) وهو اسم 
الرابط الذي سيظهر على شريط العنوان عند فتح القسم ويمكننا تركه فارغا او كتابة اسم القسم باللغة الانجليزية كما في الصورة. الخيار الذي يليه 
(الأصل) وهنا اذا كنا نريد الان نجعل القسم تحت قسم آخر أو فرع منه مالم نتركه كما هو. 


(الحالة) في حالة اردنا انشاء القسم وجعله مخفي وغير مفعل نقوم باختيار (غير منشور) مالم يكون كما هو عليه (منشور). 
(مستوى الوصول): في حالة اردنا حصر رؤية القسم لفئة معينة في الموقع مثلا المسجلين فقط أو خاص مالم نتركه كما هو. 
(التراخيص) : وهي وضع صلاحيات محددة للمستخدمين. 

(الوصف) : وصف القسم. 

ملاحظة : الحقول التي تكون إلزامية هي المؤشر عليها بالنجمة الحمرا كما في حقل (الاسم) ونكتفي بعمل الاسم فقط . 


بعد عمل القسم أعلاه نقوم بعمل كليك على (حفظ وجديد) وسيتم حفظ القسم التي تم إنشاءه. نقوم بعمل بقية الأقسام بنفس الآلية وسيكون شكل الأقسام 
بعد الانتهاء كما في الصورة: 


بيك + 2 . عدة 1 - اا 
الارثيف الشخصر تاها اهاذة بناع الخيرات الى حدد 


59 مدير المجموعات: المقالات 5 6 09 0 ! ي )| © . 56 


المقالات المسجير اتات المقالات المتميزة 


م ٠‏ فق عد وت 
القلترة: البح إعادة التعيب: 


الاسح الحائة م الترتيب ات مستوى الوصول اللعة رقم التعريف 


50لا 1 0 عانم ١‏ 9 
) : ل001150ع1و6 انا 1 0 


2 © 6 عناطنم الجميع 78 


تصميم المواقع الإلكترونية 
) : ١اوأ5ع‏ لاع ر١١)‏ 
تصميم جر اقكس 

جر كحس 3 © 6 عناطنم الجميع 79 
تعار: جعادام013) 
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خام 


© 6 عزانم الجميع 81 
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كما نلاحظ أعلاه تم حفظ الأقسام الخاصة. 


التحكم بالمجلدات والصور 


دائما قبل البدء في العمل على جوملا وإضافة البيانات لابد من وجود تنظيم وترتيب لعملية إدخال البيانات كالصور والبانئرات وهنا سنقوم 


بعملية ترتيب وعمل مجلدات في نظامنا منها ما هو مخصص للصور ومنها ما هو مخصص للبائرات. 


من لوحة التحكم نقوم بعمل كليك على (مدير الوسائط المتعددة) كما في الصورة: 


0-6 ك' 


5 5 


35 ١ 6: ٠ 5 1 - ديبس‎ ١ ه 22 رذ‎ 

5 5 1 -. 3 

اكه مف عد ١ه‏ هادان سد 50 + جفانا هل انخ بسانت انقنت :2 
م ل جدن ل 0 بل الشجفوق نل آلق 


ستظهر الصورة التالية : 


مير لمستخ امير 


- 1 6 مه 
0 مدير الوسائط المتعددة 1 | 0 01 
حلذف الخيارات المساحد 
رض مصغر رض مقصل 
المجلدات الملفات 
ت از ش 2 25ر3 إولمومر كد 
الل 5 لووط 4 
8 ([دغدلءاممده 
© ( 7 34 9 ”7 90 ”7 9 ”7 
525025 1م51 قاط_ذاتممهز 3_972 00571 0057113_109ز لاط_لمععاهم 


في مدير الوسائط نستطيع رفع وحذف أي ملفات وإنشاء مجلدات أيضا لاحظ المجلدات على اليسار سنقوم بحذف الصور التي بجانبها 


بالتأشير عليها ثم الضغط على (حذف). وستظهر كما في الصورة: 


المجلدات المئقات 


8 [إندغدلءاممدد 


نقوم بعمل مجلد اسمه 122852014 بالنزول قليلا في نفس الصفحة وكما في الصورة التالية: 


كع جمدم ! 5 غنم ردص لكشك نام رما نا 0001| 
رفع الملقات | الحجد الأقسى: 1 علا 


| 0 عددمطك | معددك هال دلا 


آلر 3 


ات لضسيوة 
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كما في الصورة أعلاه على اليسار نقوم بعمل اسم المجلد ثم كليك على (إنشاء مجلد) وسيتم إنشاءه بعد إنشاءه نقوم بفتحه ثم عمل مجلد 
آخر بداخله باسم 5-2014 بنفس الطريقة. 


إضافة مكقالاث 
من أهم الاشياء في نظام جوملا هو كيفية إضافة وهنا ستقوم بعملية إضافة مقال وسيكون لدينا بعض المقالات أو البيانات التي سنضيفها وهي كالتالي: 


" مقالات مع الصورة تحوي الخدمات الرئيسية التي نقدمها وهي (تصميم المواقع - جرافكس - شبكات وصيانة) . نجهز ثلاث صور وعبارات نصية 
وستكون الإضافة بالطريقة التالية: 


من لوحة التحكم كليك على (إضافة مقال جديد) وستظهر الصورة التالية: 


55 -[ وو يلا 7 00 م عع شير حك لع نام /زق ابقع أ أرق - راع ليق ع5 


ةُ مدير المقالات: إنشاء مقال جديد 


مقال حديد 

لاسع تصميم مواقع إلكترونية 
لاسم المستعار طعن 

المجموحة * خدهفننا ؟ 
الحالة هنشور آي 

مستوى الوصول عذاطنه ؟ 
التراخيصس تحديد التراخيصر 

مميزر با 

اللغة الجميع آئا 

رقم التعريف 0 

تس المقال 


> تاموووءده ‏ + وعارنز5 | 2 2 ع > | عم ن م و 
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تقوم رواد التكتولوجيا بتصميم المواقع الالكترونية الرسمية بأنواعها سواء كانت تجارية أو مؤسسات خدمية أو حكومية او منظمات أهلية ومجتمعية 
وققا لاحدت التصاميم العالمية والانيقة واستضافتها على سرفرات ذات كفائة عالية. 


7 57 ررم :واأدم 


كما في الصورة أعلاه الحقل (الاسم) نضع العنوان المناسب للمقالة أو الخبر أو أي شيء. (الاسم المستعار) كما ذكرنا سابقا الاسم المستعار هو الاسم 
الذي سيظهر في نهاية الرابط ويمكن تسميته بأي اسم باللغة الانجليزية أو ارقام عشوائية او تركه. (المجموعة) وهنا يجب الانتباه عند إضافة أي مقالة 
نختار القسم المناسب لها كما في الصورة اخترنا قسم (خدماتنا). الخيارات في (الحالة) نتركها كما هي عليه (منشور) . الحقل (مستوى الوصول) لو 
اردنا تخصيص المقال للمسجلين مثلا وحصره على مجموعة معينة ويتم تركها كما هي غالبا. (التراخيص) وهي مجموعة الصلاحيات للوصول لهذه 
المقالة من حيث التعديل او الحذف هذه الخاصية لا تستخدم بكثرة وتترك كما هي. 


(مميز) وهذه خاصية تستخدم في بعض القوالب القديمة بحيث يتم عمل زر (إقرا المزيد) في المقالة وتعيينها كمميز وتظهر في الصفحة الرئيسية لكن 


الان يتم ترك الخيار مميز كما هو عليه نظرا لوجود موديولات تقوم بنفس عمله. (نص المقال) وهو الأهم وكما نلاحظ كتبنا مقال معين حول العنوان 
الذي أدخلناه. 


0 0 00967 :ع |8 ١/0‏ 
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نقوم الآن بإضافة صورة وهو عمل كليك في بداية المقال وانزاله سطرين والعودة الى السطر الأول بمؤشر الفأرة لكي يتم ادراج الصورة في ذلك المكان 


أي في السطر الأول كما في الصورة: 


تصن المقال 
> تامقمودمدم - ومابنات ِ 1ح حت هك | عم [1 ثم 1 
م ها # 5 بل | © | ع 55 | د د: 
0 12 | ف 2 | :1 2 وه 
تقوم رواد التكنولوجيا بتصميم المواقع الالكترونية الرسمية بأنواعها سواء كانت تجارية أو مؤسسات خدمية أو حكومية او منظمات أهلية ومجتمعية 


وفقا لأحدت التصاميم العالمية والأآنيقة واستضافتها على سرقرات ذات كفائة عالية. 


5 منطفوع 


إدراج رابط مقال | ,) ١‏ | إدراج صورة كت 


( إدراع صوية | 


عي مود ست 6 مسو فيو 
قاصنا. الصتقحات 5 ١‏ المريد 6 سنيل المحرن. 





نلاحظ في الصورة اعلاه وجود الزر (إدراج صورة) نقوم بعمل كليك عليها وستظهر النافذة التالية: 


2 


00015 177052014 6035 1م5311 


عند اختيار 'بدون تعيين', سيتم تحذيذ الإصطفاف بواسطة الصتف ((385ا© 


0 ؟ 1 8 52 وفعؤق- حت ىَْ 5 م 2 
بدو تعيين 1770-136.". يستخدم عادة لضبط (تمركز)ء الصورة في مركز الصفحة. 


إذا تم الضبط على 'نعم"'. سيتم استخذام اسم الصورة كوصف للصبورة 
7 بع ا سيدم تمد الصيور 3 


رقع الملغات (الحجم الأقصى: 10 1/18) 


١‏ مااع عدمه5ت | معدمك ع8 هلا 


بدء الرقع 





كما نلاحظ في الصورة أعلاه تظهر المجلدات والمجلد الذي أنشأناه سابقا نقوم بالضغط عليها وسيظهر المجلد الاخر الذي انشأناه والذي هو ه_:١."‏ 


نقوم بفتحه ايضا وسيظهر كما في الصورة : 


0 /00967 :ع اا8 0لا 
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17952014/5-2014/ ١ مجلد‎ 


ه لم_يتم العثور_على الصورة 


عند اختيار 'بذون تعيين', سيتم تحذيد الإصطفاف بواسطة الصنف ((1355© 
آي الكتواب8 بجوي ل ا 
010-2-_1770.". يستخدم عادة لضبط (تمركز)ء الصورة في همركز الصفحه. 


إذا تم الضبط عل . “نعم" سيتم استخذام آمم ال رة كوصف ل رة 
ٍ! بط على, مية الصيور للصنورة. 


رقع الملفات (الحجم الأقصى: 10 118) 
ا قعااء ءعومهت | معدمك ع/5 هلز 


بدء الرقع 





كما في الصورة اعلاه تم فتح المجلد ١4-5‏ وهو فارغ في الجزء السفلي من النافذة تحت (رفع الملفات الحجم الاقصى ٠‏ ميقا بايت) نضغط على 
زر (اختيار ملفات) أو (1"115 ©121005)) ستفتح نافذة أخرى ومنها نذهب لمكان الصور التي سنضيفها في المقال او المقالات والضغط على (رفع) علما 
ان هنا يمكننا إضافة أكثر من صورة ولو لمقالات أخرى. سنضيف ثلاث صور ونبدأ الرفع وستظهر كما في الصورة: 


ق تم اكتماك الرفع: 1 وودم.3تع لذاى11105201415-20141 


محلد ١‏ /52014/5-2014و1 ؟ | )أعلى 


5 © 9 


ومم1 ع0 51 ومم,2ع5|10 ومم,3ع5|10 





كما في الصورة أعلاه لإدراج صورة ضمن المقال نقوم بعمل كليك على الصورة التي نريد إدراجها ثم نضغط (إدراج) في الأعلى على اليسار وستظهر 
الصورة داخل المقال كما في الصورة: 


١/08 ||: 00967 0 11111 
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نتن المقاق 
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تقوم رواد التكنولوجيا بتصميم المواقج الالكتنرونية الرسمية بانواعها سواء كانت تجارية او مؤسسات خدمية أو حكومية او منظمات اهلية ومجتمعية 
وفقا لاحدت التصاميم العالمية والانيقة واستضافنها على سرفرات ذات كفائة عالية. 


779 ددم :لأأحم 


5 فاصبل الصقحات إقرا المزيد ا تبذيل المحرر 


انراج رابط ههال اذراج صي ؛ 
#“لى نج 21 - . درا 


نقوم الان بعمل (حفظ وجديد) ونقوم بعمل مقالتين ايضا بنفس الآلية وفي نفس القسم (خدماتنا) والمقالتين التي سنضيفهن (تصميم جرافكس - شبكات 
وصيانة حاسوب) وسيكون شكل المقالتين بعد الاضافة كما في الصورة: 


مدير المقالات: المقالات © © © دا ا مي 8# لق خح4* 
يد الحدرل تش إلعاء التشر مميز 


بو +.ء 0 1 ١ - ١‏ 5 
الارشيف افكت حذف الخيارات العساهدذه 
رغد بن ار 














القلتر البحت | | إعادة التعيين اختيار الحالة - ” | | - اختيار المجموعة - “ | | - اختيار أعلى حد للوصول- ” | | - اختيار مستوى الوصول - * | | - اختيار المؤلف _ ” | | - اختيار اللغة - __ ” 
أخديار اله المجعور عه 
0ه15)موء هه منا 
تصهيم المواقع الإلكترونية . : 3 3 
الاسم ا الحاله معيز السجسر نفد ربب الل انشئ بواسطة تاريخ الإنشاء عدد الزيارات اللغه ركم التعريف 
شبكات وصبيقة حاسوب 
20101115 2011513101 - عام ]ع5) أعمنا5 ١‏ 
© 0011115 / 3 2011-01-1 2 الجيع 1 
) 15 112---301111511310) 00113 3 
011 10/] عنااراعيم )ع5 رعمناة 
© كعاناكها! أمعامم0 5 عتامطنام 59 2011-01-1 لجميع 2 
) : عانال 0 ادع مااراع3) ) 00113 
1001 231800115 عاء نمام َ 5 8 5 
© كعانانل0!؛! أمعامم0 6 ع ناطناط ]52 أعمناه 2011-01-0 6 الجيء 
) عانال7700 هعم وعأوع-عاء3)1) 
عانال0!!] /0318000 5ع 16م - 57) اعمنا5 
201 © دعاناكها! أمعاممه 1 عتاطنام 1 9 2011-01-1 10 الجميع 4 
) 001113 


) ع1ن11001-/موعأوعو5عاء 1 3) 


تضيع المقالات التى أنشأناها بين المقالات التجريبية التى تكون ضمن جوملا ولكى نظهر المقالات فى القسم الذى نريده كما نلاحظ أعلاه نختار الق 
ستصيع : : : ضفي ُ 
أو المجموع كما في الصورة أعلاه وبعد اختيار المجموعة ستظهر المقالات كما في الصورة: 


0 00967 :ع اا8 ١/0‏ 
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0110000 | بم ج> 
مدير المقالات: المقالات © ءا [ ا ا ١80‏ 
جديد تعديل تشثر إلقاء التشر مميز الأرشيف22 الفحصس حذف الخيارات الساعدة 
المعشالات ا اساي ملام لمشالات المتمنر 
الفادر البحت عادة التعيين - آخنيار الحالة - ” ) | خدهاننا ” | | - اختيار أعلى حد للوصول ” | | - اختيار مستوى الوصول - “ | | - اختيار المؤلف ” | | - اختيار اللغة- 7 
الاسح اث الحائة مميرز المجموحة الترتيب مستوى الوصول أنشئ يواسطة تاريخ الإنشاء ١‏ حدد الزيارات اللعة رقم التعريف 


لمشيع جر أقكم 5 
خدهاتنا 1 عزانم ]ع5 'عمنا5 2014-05-08 0 لجيه 
43-03-17-08-05-4) 
3 5 أقم الك و نئبة 
تصميم مواقع إلكتروندٍ © خدماتتا 2 عنامطنم عع5نا ععمنا5 2014-05-8 0 الجميع 71 
ماعن" ) 
يكت وصمر سوق © خدماتتا 0 عانم 57 'عمنا5 2014-05-08 0 الجميع 


إضافة مقالات للأقسام التي أنشأناها سابقا 


في كل قسم ثم عمل " مقالات في قسم عام وهي (من نحن - اتصل بنا ) وسنحتاجها في بناء الموقع لاحقا لأن عدم وجود بيانات ولو حتى افتراضية 
(تجريبية) لن تستطيع العمل على الموقع بشكل سليم وتجرب كيف يتم عرض البيانات وما الى ذلك. 


القوالب (د5ع]12«ردرع1) 
تعتبر القوالب من اهم الاضافات للنظام جوملا كونها تمثل واجهة الموقع والقوالب موجودة بكثرة وتدعم جوملا ويمكن الحصول عليها من المواقع 
الداعمة لجوملا. ويمكن البحث عنها (وع2126داء1 001212[). 


يوجد قوالب جوملا مجانية وقوالب أخرى غير مجانية ومن المواقع الداعمة للقوالب: 


(صامء.وء) 2 [مصدء)ش[حامه زامط - تتدمء.عصعط)700 - تصم.ع 2 [أمتصةء]200 - حنام.اء)دددمد-د[تنرموز ) وهنا مثال لأحد القوالب التي 


سنطبق عليها: 
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لدينا هنا أحد القوالب المدفوعة (غير المجانية) سيتم ارفاقه مع تطبيقات الكتاب. سيتم تنزل القالب إلى الجهاز ثم تركيبه على الموقع الخاص بنا جوملا 


وطريقة التركيب كالتالي: 

من لوحة التحكم (مدير الإضافات). 

اختيار ملف. ومن هنا نختار القالب كما نزلناه من الموقع الرسمي للقالب. 

بعد اختيار القالب يتم الضغط على (رفع وتنصيب) وسيتم التركيب وظهور رسالة النجاح في عملية التركيب. 


ولتعيين القالب الذي اخترناه للموقع نذهب من لوحة التحكم نختار (مدير القوالب) وستظهر الصورة التالية: 


سمس 8 0 4ه 
مدير القوالب: الأنماط ١-4‏ 2 | 098 | ++ 
وس م كه الافتراضي تعديل تسخة طبق الأصل حذف الخيارات الساعدة 
لأتماط شي لدم 
القلتر البحتث عادة التعيين اختيار القالب 7 اختيار المكا 7 
الأنماط المكان القالب .ت الاقتراضي معين م التعريف 
]تووم -عاممومام اموقع ام © 3 
آ إنرمعم - 5جمو8 الموقع 25عع5 © 6 
الالآئزة يروم 2جموع الموقع ع8 © 114 
]ووم - 2جموق لموقع ع5 3 © 4 
]وعم - رمأدونا8 المذير 0116غ5ع نا 8 2 2 
5 ااناهقع م - ,و طون لمذير [اسإزااعلها 5 
7غ 117175 وومةه ,وموحة ‏ الاقتراضي الموقع 53 اعم3آ51 115 





من خلال الصورة أعلاه. نضغط على (5122761_5066©01:2 - الإفتراضي) للدخول على اعدادات القالب ود تعيينه كافتراضي للموقع من خلال الصفحة 
التالية: 


١/08 ||: 00967 0 11010‏ 
لالتحا أ0.0أم داعع0©1م1 :اأهمع ‏ 772755202 2:00967 || ١/08‏ 








| مدير القوالب: تعديل النمط 
اتا تصق اللا 
التقاصيل 
اسم التمط * 0613 6م503 - الإقتراصي 
القالب 562 ععمدراد الموقع 
الافتراضصي 20 آي 
كن ايفان 
وصف القالب إكانا) طوذاومع)_ | 
2 6م5113 


1.7 001115113[ الالالالالا راط 21 مرمرع 1١‏ 2.5 0011112ل. 
06 


015 2010 5كع]2 املاع 12زوول اانالاع/اثلا0م 200 انالروعمط, 
1.1 0011151120[ الاللااا لاطا 


5 ماع ام00115113ل الج 01 مررع0 علا 2 عع5. 
607 .1عم70.001115113مع ل الزمااط 


يلاع 01 رئاع اناترع017 


.زأآع2مهع 100آلاآناط عأأططع الا أ25] أعمناك 01 110م/الا 2 ا 00 اااعبثال أأعك] ناملا عرأودددا 
5310 أكناز 1131 نامل[ 1131 اعع1] ناملا ع زواع أاعناء منا 101//0ن لإأأنا؟ )] عع5 أؤناز ناملا 
60110 ع1 را ععوعع0111 ع1 اعع] ناملا 121 مأ عع 15 )[]مناع لدم عززاع4] !)ا ووالااساط 
اناملا رباعم 5113 1زم0ل بلط لعمرماعناع0 وععط 125] أع1ال0]م 1١115‏ .00 الوادع0 عاأراع/لا 0 
01 '[3ثالا 11) 10 ا 1اأطاودععع2 [25» 21 101 ,110مكالا 0011ل ع1 مآ لنمع11] لع ]اونما 
5ع11أ2ع1 25!)00] لأكدع 01 05ع001نا١!‏ الأآلا دعاأعطعننا ل0ع25ط داومل ووالاآناط. 


)1131 ااآلالا )آ -00تأد5ع نان 1115 35 عأام22ا5 35 15 )1 ,العلانا 007 10 لمعام! )1 5ع00 غ2اثالا 
“ازاع1]! .عرواع رعلا 11210 511001111 لأعنام عأأعطعنلا ولتاهع]ء 01 ععروعلمرعمعاع انملا 
101١11‏ عأاجعاء 0غ ناملا 0غ 00015 عاط51كىمم ع1 الج لاعم0 10 105 )1مبلاعء رمآ 

0 55 10آ-]آآاناط الأآالا عامهء 5هذ! غ! .13 عدعع! ما عاأأعطع/لا لعأهء5]1ززام0و5 


* 6و8 
0900 ا 
1 000 ا 
0 000 ا 
أل لاا هموما 
ألاواع 0 06وه ا 


عم أناه/ا3ا 

ل ألايا بزل 80 مندانا 
ملالا لتنااه0 أأع ا 
مالالا لتنااه2 أحاولها 
أل الألا اع دما 

لال الثرا ماع دما 

أأمنا أل اانا 


لاوا 7715اناامء لعجا 


5ع انا5 أموعرم 


10 او ]نام ه2) هرات 


10 111و ]لام 00 


5 1/ 


سي كم 60 © 42 


حفظ حفظ وإشلاق ١‏ حفظ كتمخة إغلاق الساعدة 


© هوقما ‏ © يرم 
إذاعي 

260 

130 

| 

| طون + تمعثممع + 8ع ” 
0020 ]| 
260 

260 

100 

100 


() إمععممم ‏ © إمبرزم 


© *. 0 تعم 
اكعاذك ” 
() ولم © وهلا 


1 
2012 211 .مصسوطة دعععءجة5 ««عوقطة 


| مهب جه د هه هد جطم 53 


من خلال الصورة أعلاه عند خيار (الافتراضي) نختار الجميع. ثم نقوم بالنزول إلى اسفل الصفحة وستظهر الصورة التالية: 


006 


5 -1 نه ع 7 © خخ طه ا كه ؟ 


1121 [االالا )1 -010لأكع نان 115 35 1م511 35 5! غ]] ,الع لاا 007 10 ١10100‏ )1 د5ع00 21لالا 
اااع1] .ع رماع زعلا 11210 511001111 (لأعناته عاأأططع/الا واتاهع]ء 01 عموعلوعمعاع إناملا 
1011 عاهعىء 0غ ناملا 0غ 00015 عاط51ك5ىمم ع1 الج ماعم0 10 كراج )1 منااع ريم 

0 55 10ل ]أآناط الأآلا مه 1325 غ! .10 عدعع! مآ عاأعطع/لا لع1)دع115]1ام50 

12511 اأطهناع 1أعط انا )] )11121 10 ناملا 101 امأكعع] ملام أملرعذ وتالول! 





تعيين القوائم 

قائمة الاختيار: تبديل التحديد 

3 لل أناهطام عاوو2 روات أكنام 
5]- 513080 وملتتاع0 59- عتمت ىاروم 
9]- 3اتصومل 510لا! 59]- و8106 قم 


9]-- 708051005 ووأ5نا 
0- - - 001770011115 


ك5 -أقوس وما8 3 غ مثالا 
9- 311817 157390 


9]- - - -أمعممملممي امعاممق 9]- - 1603315الش 
6 - - - - - هاع تارم عاوماة 59]-- مم50 
0 - - - - - 231800185) عاءناامش 9]- قكأامنا هم 
0 - - - - - وها8 للرموع031) عاءنامش 
50 أأنوط 
9 - - - - -51لا 03189019 عاعلااش . 
0 - - - - - قعاء نمام لع]رأدع] 1 5 1 
0 - - - - - قعاء تأرف لع/اأراعيمش سوسس 
و - - - - - فاعلاهث اأمرطناك 7 
9]- - - -001م2051) أع13اممت لا د ون 
9 - - - - - 0318001185 020101361 1 0-5 
9]- 1005عغ8]آنا 


9 - - - - - /[2318001) 18اوما5 00013016 


6 --- - دأعقأمه0 عاوواة - 6م86 8003 





6 - - - - - 0010113615 لع الاأوة] - 8601065 

وس - - - -أمعمهمحوم0 مام نامع الا نامع انا متوالا 

6 - - - - - ال أاطع لاا ج أألصطناة 5- عصممم 

6 - - - - - اموع 031 عاوواة ماو أامع نالا 5- مدان 518 
9 - - - - - 5ع نر موع31 0 5كام ذامع نالا مم - - 5عاعتارم 
59 - - - -أمعممممممت ملععع ديعل و - - مكلام اام ع ثالا 


10 111و الام م2 ثورات 


10 111و ]لم00 


000 ا؟ااع ل زه ات 


ع 0060 ا <زاعن 
ا 08510060 


4 نالعالا 
4 5أاروطآ 
>> لعع130ل0م 


10-5ي8 ]لع - أنام/زق ايقع | - /لاع أبحيق و3 م دراعغ_حررمع ت دنه نغأحره7 ماما 1301/150 كان أد32.5/30 انمه ز/أدهطاةهوا ذا | © جه ©» 


() ولم © وعلا 


|2012 211 - مصسفط 3ععععم5 ع««عصقطة 
2 85 و5غط0 213 


© ولد © وهلا 
هومس القدر5 أطونا *” 


27م 0053ل) زط لمعم وزدع 0 


من خلال الصورة أعلاه نقوم بالضغط على (تبديل التحديد) ليتم التحديد على جميع المربعات الخاصة بالقوائم كما في الصورة : 


0 /00967 :ع اا8 0لا 

















ع .0 م طاععغ]. ثانالا نالا 


اتلك ت 160و اإطووة 


2 /0096 :2 ع اا8 0لا 





تعيين القوانم 
قائمة الاختيار: تحبا أده 
كا كارن تبديل التحديد 0 «زاع نا بثزه اك ولا © وهلا 
0013ل أنامطام عاوج2 رروأات كام 10 096 ا <زاعنا وها القم5 أطونا ” 
ي] - 5130180 وللتاع نا (ي- علممط 16 هم زم معموزوقع0 مم ممه ل) برط معموادع0 
تي - 0017713ل ومرأ5نا! وي - 8109 اروم 
بي - - 605أىمعلع ومأونا وي - 2051 وما8 3 غ1ثالا 
ويه - - - 115 هم مره © يه - /180ات0) ع139ما 4 نالعالا 
قي - - - - ألمع موم مم0 أمعاممن بيه - - 151315ألض 4 قكأاصمط 
2 - - - - - عاعنمم عاوراه تي - - 50101811 >4 لعع130ل0م 
7 - - - - - قغع1رموع031 عاءعنارمش ي]- 65انانا ,ةم 
- - - - - 8100 0318001 ع ناماش 5 
- . 5 مهاد أأنوط 
7 - - - - -51لا 2318001 عاءنمامش 
7 - - - - - وعاع نمم لع]نأدع] 1 06 ١‏ 
9 - - - - - وها نارف لع اعم 2005000 
5 - - - - - هلع تقوم اأممطاناك كظ0ظآ” 
قي - - - - 11 0م2071 0001361 هه 58 توصي 
5 - - - - - 0318001185 00111361 1 6 : 
7 - - - - - 2318901 عاولرأات أء3أمه 2 2 ل 
7 - - - - - 2001361 عاوراة 2 5-85 58ظظ 
2 - - - - - 20113615) لع]لاأقع] 6 
بي - - - - مع مهم حممي معام امع الا نامع اناا متذانا 
9 - - - - - 16ل أامعلالا 3 االطناكه في - عمرونا 
7 - - - - - 03189017 عاومات قال امع نالا وي - مذانا عازة 
7 - - - - - 23189001185 5الأامع نالا بي - - هاعارم 
تس - - - - 1ق لممدممي دلعع2 ولناع ل( : عاص ةلطدلة1 


بعد عمل الخطوة السابقة نقوم بعمل (حفظ وإغلاق) وسنقوم بالضغط على (معاينة الموقع) اعلى لوحة التحكم على اليسار وسيظهر الموقع كما في 
الصورة: 


/ر2.5ةاتمه ز/بأكهطاقءهوا| 5 © 


احاح م عط خم تت حنة ا جاع 11 


من خلال الصورة أعلاه لم يتم فتح الموقع وظهور رسالة خطأ وتعني تحميل ال(42136770112) الخاص بالقالب والموجود في نفس الموقع الذي نزلنا 
منه القالب وسنقوم بتنزيله. بعد تنزيل ال(25ؤ[_11:2[©ط_دوء)575_ع1م) نذهب من لوحة التحكم إلى (مدير الاضافات) ونقوم برفعه وتركيبه كما قمنا 
بتركيب القالب. ثم نعود للوحة التحكم ومن القائمة (الاضافات) ثم (مدير التطبيقات المساعدة) لتفعيل الل :ملع 01دة]) كما في الصورة: 


> 2 حز ويف ذا 7 08 ا يخ ثي مب مططصيدع 1/50 15130 أ ل5/3. 32 1ه [/أدوطأاةءو| 5 ١‏ © ى 






واه 


5 لايوجد أعضاء ذاخل الموقع 7 1 عضو ناخل الإدارة “| لاتوجد رمائلن © هعاينة الموقع اه تسجيل خروج 


"لتكت ِِ 5 - 
0-0 * آخر 5 إعضاء ثاموا يتسجيل الدخول 
مستبت الاسح المكان رقم التعريف التشاط الأخير تسجيل الخروج 


| المتعددة هدير القوائم كين لسع هين مع5نا ععمنا5 المدير 19 2014-05-8 09:24:00 


- 0 2 © - 


هدير الموذيولات هدير الإضافات هدير اللغات الإعدادات العامة هدير القوالب تعذيل العلف الشخصب 


57 57 5 3ت 5 عه 
لديك آخر نسخه هن جوهادا لديك آخر اصذار هن كل 





إضافة هقال جذيد مدير المقالات 
4 أكثر 5 مفالات قراءة 


4 آخر 5 مقالات مضاقه 





بيد قد 
الإضاقات 


ستظهر الصفحة التالية: 


,5 0-0 ”م /00967 :ع اا ١/08‏ 
ع .0 م طاععغ]. ثانالا نالا 





اتلك ت 160و اإطووة ا 0 0 10000 

















ل 





- - هه 
الإدارة ووه ه 8 ١‏ 
الموشع اميل الشوانج النصريات التطبيقات الإضانات المساتاة 0-5 لايوجد أعضباء داخل الموا قع د 1 عضو ذاخل الإدارة 5- لاتوجد رمائل © هعايتة الموقع 3 جيل خروج 
32 وم 5 3 وم 32 يو 1 2 4 
مدير ١‏ لتطبيقات المساعدة: ١‏ لتطبيقات المساعدة 302 
الفلدر اع لبحتث عادة التعيين أختيار الحالة  -‏ ”7 ختيار التو ؟ أختيار همستوى الوصوا ؟ 
اسع التطبيق المساعد الحائة الترتيب التوع .ث تتقصر 0 رقم التعريف 
المصادقة - جوملة © 1110 أناة 2013 انظ 401 
مصادقة - |زج|/ا6 60 10 1أأناة 0113/1 عزانم 400 
توتيق - 2ث0] | 0 مم1 مع اناق موقا عانم 402 
التحقق - 8)230106113] 0 8ع مق ممع عزانم 439 


من خلال الصورة أعلاه ستكون الاضافات المساعدة كثيرة ولتوفير الوقت في البحث نكتب عبارة ضمن اسم الاضافة التي نبحث عنها في حقل الفلترة 
كما في الصورة ونكتب ولو جزء من الاسم كما كتبنا (:1ؤ12»1) ثم نضغط (البحث) وستظهر النتيجة كما في الصورة: 


*« و« 30 و« 1 2< 4 
مدير التطبيقات المساعدة: التطبيقات المساعدة بي ا > 
القلترة: عرزاعط البح إعادة التعيين - اختيار الحالة - . ”7 - اخنيار التو - ؟ - اختيار هسنوى الوصول - ؟ 
اسم التطبيق المساحد الحاله 589 النوع .2ت امير , - رقم التعريف 
52 الوصول 
]لاع لم قرع #زاع نا - لماوز 0 0 0 قاع جا أأمانام 10005 


عدد أمطر اللنئحة: | 20 آي 


نلاحظ ظهور الاضافة وأمامها إشارة حمراء. نقوم الان بعمل كليك على الاشارة الحمراء وستتحول على اللون الأخضر ويعني هذا تفعيل الإضافة 
الخاصة بالقالب. سنفتح الموقع وسيكون كما في الشكل: 


حتنناكية م12/! 51 0010 ] كت تل١‏ راب 600 م51 د5ع230 عام2»300 





دءأعهمك 





كما نلاحظ كيف ظهر الموقع وهو شبه فارغ. 


«٠ َ‏ يف 1ك 9 

اماكن الموديولات (205110<5 ع1100111) 

عند تحميل القالب تكون الشركة المصممة للقالب قد عرض في صفحتها مميزات القالب واجزائه ومكوناته ولذلك فلابد عند تنزيل أي قالب معرفة 
الروم05110) الخاصة بالقالب ليتم وضع المودويلات المناسبة لها والقالب الذي قمنا بتنزيله يحوي خارطة بهذه الأماكن وهي كما في الصورة: 


081١1: 00967 0 111‏ اا 
لالت ا ل أعم.هأم داعع]0©1]م1 :اتأهجمع ‏ 772755202 2:00967 8|115 ١/60‏ 





0016 3015م 14م 00613 112 011 
575 600 
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11-0 ممع نناوة؟ 1611-10 
1014 يننا" 4 4 بااوع) داوع 2 اعربناوع] 604 03 
1---0111 1 0ع اباادع؟ 12-1 
8عراوء] لكلا 6عإنااقعء] 5غ نااوة] 
10105612 111 


1181م 
1 )لا 13 
م0غع-بلؤااانان 
4ن انان 2/بزااانأن ازااانان 


10 بإثااانان 
6001168 6001168 0011606 001165 
056-71 
60005 
1000006 10005 10014 1003 10000012 110001 


1006-31 


كما نلاحظ الأماكن في الصورة أعلاه والمسجلة في الصورة عند تركيب الموديولات يتم وضعها هناك. 


ذركيب الموديولات 


الموديولات كما عرفناها مسبقا هي اجزاء المواقع الالكترونية والتي يتم ضبط اعداداتها وتحديد مكان ظهورها في الموقع. هناك أنواع كثيرة من 
الموديولات كلا حسب وظيفتها : (موديولات جامدة - موديلات ديناميكية ). 


موديولات جامدة : موديولات يتم وضعها في مكان معين في الموقع ولا تستمد بياناتها من قاعدة البيانات وسيتم العمل عليها لاحقا مثل عمل بانر أو 
صورة أو إعلان معين. 


موديولات ديناميكية: موديويلات يتم وضعها على الموقع وتستمد بياناتها من قاعدة البيانات من خلال قسم معين داخل الموقع مثل (موديولات الأخبار 
الرئيسية - موديول آخر الأخبار .. الخ). 


سنقوم الآن بالبحث عن مودويلات مناسبة للموقع الذي نعمل عليه الان وسنبحث عن موديول سلايدشو ليكون في الصفحة الرئيسية. بعد البحث في 
المواقع الداعمة لجوملا سيكون لدينا مودويلات جاهزة مثل : 


(2200_158075511061:1) سلايدشو. 


(22001_1226395_51207_502) لعرض الأخبار. 


١/08 ||: 00967 0 01‏ 
لالتحا أع0.0أم حاعع0©1م1 :اأجممع ‏ 772755202 2:00967 |8 ١/60‏ 





ا/ا؟" 


(20164_5211639زه_م2200_5) عارض صور بسيط. 
(25ز_16_58011612م222زو_م2200_5) عرض مقطع من يوتيوب حسب الاختيار. 
بداية نقوم بتركيب الموديل الأول وبنفس طريقة تركيب القالب (مدير الاضافات - اختيار الملف - رفع وتنصيب) . بعد التركيب من لوحة التحكم نذهب 


ل(مدير الموديولات) وستظهر الصورة التالية: 


© © © © ب © 8ن +4 


السسد ا لم ل 5 
سعت مدير المويولات: الموديولات 

جديد تعذيل تسخة طبق الأصل القحص ف الخيارات الساعدة 

الفلتر البح“ جد 8 الموقع ”7 اختيار الحالة  -‏ " ختيار الموضع 7 اختيار التوع ؟ - اختيار هستوى الوصول - ,5 اختيار اللغة - " 
الاسح الحائة الموضع .ث الترنيب النوع التسفحات مستوى الوصول اللغه كم التعريف 

١/0110 10 1‏ لاشىء (تفعيل فوري) 0 ع0 عاك اا لاشيء (تفعيل غوري) عأامطنام الجميع 057 

1لا00 0 اع الال ألا ي دري ي وري بع 
5ع ع تأرف لع /اأراعرم © : لاشيء (تفعيل فوري) 1 أرشيف المقالات المحدد فقط عنامطنام الجميع 27 


من خلال الصورة أعلاه نلاحظ الموديول (117)015511011) وامامه العلامة الحمراء نقوم بالدخول على الموديول بالضغط على اسمه وستظهر الصفحة 
التالية: 


الدصل 

الاسم * 11 5110 الاو اا 

إطظهار العنوان 8 إظهار إخقاء 

الموضبع ع امم مط أجرواع آي تحذيذ الموضع 
الحالة غير هنثور 2 " 

مستوى الوصول عأاطنه ؟ 

التركتيب 1. أعاناههان! م10/00/5110 2 ”* 

بداية النر 0000-00-0 00:00:00 | و5 

تاريخ انتهاء النتشر 0000-00-0 00:00:00 | 50 

اللغة الجميع آي 

رقم التعريف 057 011 5110 انا0 نالا الموشقع 
وصف الموديول لآلا لعأاهعء بالا رادع5!10 1120 /ا1!10ك الآانا 101ل100 1115 - 1 عانانله1/! ,5110 01لا 


51101 انالا 


كما نلاحظ الحقل (الاسم) بإمكاننا تعديل الاسم وتسميته بأي اسم اخر ٠‏ إظهار العنوان ) في حالة اختيار إظهار سيتم عرض الاسم في الموقع لذا هنا 
سنختار (إخفاء) . الموضع وهو الاهم من خلال الخريطة الخاصة بالموقع تبين لنا ان هنا مكان مناسب للسلايدشو أو هذا الموديول وهو المكان الذي 
يحمل الاسم (511065)» ثم (الحالة) ونختار منسور ثم نترك الخيارات المتبقة وستكون الاعدادات كما في الصورة: 





١/0811: 00967 #0 11‏ 
اه عت أع0.وأمحاءعع0©1)م1 :اتأهومع ‏ 772755202 2:00967 8|115 ١/0‏ 
























































التقاصيل 

الاسم * كعاناكها! مع لاك الاو لاا ظ 

إظهار العتوان © إظهار ا إخقاء 

الموضيع عمل ناد | | اماعط تمهاد + | لتسدي اتج 
الحالة تور )| 

مستوى الوصول عأاطنع 0 *» 

الترتيب 1 اعادهمالة 6005002 7] 

بداية التشر 0000-00-0 00:00:00 | 2 

تاريخ انتهاء النشر 0000-00-0 00:00:00 | 2 

اللّعَة الجميع + 

#لسطدة |2 0 0 _- 

رقم التعريف 57 كت اسامدا! ع0 زاك اونا المورقع 
وصف الموديول لآلا لامتامعك التمراعع لالع عو 3ت التضراك الألثلا عارال هد كا ! - 1 عاناله ام ,عل (اك للارانالا 


عاك ااانا 


وننتقل للجزء الثاني من الاعدادات اسفل الصفحة كما في الصورة: 





تعيين القائمة 
تحيين المونيول على الصفحات لمحددة فقط ذا 
قائمة اللاخثيار: تيديل التحديد الغاء التحديد | | تحديد الكل 


مل الاوجائض ععارقته نقأاق عراش 10ت انط نامع آنا ملقانا 100 لاع ازا معدلا 


تيديل التحديد الغا التحديد | | تحديد الكل 


زعم - مط 

9 - مق اا قااك 

إم- - عع عنام 

زم - - ةا قااطع الا 

[]-- 35 امنا 

- |23 ا 

9 - 85ت عاملممة5 
5-- كامظا 

0 - - تناك 

- 513191 ال احملة عااك 
زم- قعوةة عاماموويع 


من خلال الصورة أعلاه الخيار (تعيين الموديول) نختار (على الصفحات المحددة فقط) ثم نضغط على نادرء31 2زج31 وإختيار (ع110:1) ثم حفظ 
وإغلاق ونذهب لرؤية الموقع وسيظهر كما في الصورة: 


لإعماماع ال ل ٠‏ 0005 
اتلك ت 160و اإطووة 2 00967 :2 ع اا8 لا 


ع .0 م طاععغ]. ثانالا نالا 


























































































































































































































5 





وءأعمهمدك 


تصميم واستضافة مواقص 2 
ٍ 


0 





تم تركيب الموديول الخاص بالصور علما أن الموديول تم عمله ببرنامج (5110617 571803757) حيث يقوم البرنامج بعمل سلايدات لجوملا وأيضا كسلايد 
عادي يتم تركيبه كما فعلنا ذلك في تطبيق (5111). ويمكن الحصول على المزيد من الموديولات من هذا النوع على الرابط : 


) 1/621 51015.10011212.01:2/( 


يتم التعامل مع بقية الموديولات بنفس الطريقة بعد تنصيبها على جوملا ومن الموديول السابق نرى أنه جامد أي لا يأخذ الصور والبيانات من قاعدة 
البيانات ولهذا سنقوم بعمل موديل آخر في نفس المكان وإيقاف السابق. ويمكن إيقافه بواسطة (مدير الموديولات) والضغط على الاشارة الخضراء. 


لدينا الموديول (2م22001_51105120175_21:0_5) نقوم بتركيبه على الموقع بنفس تركيب السابق من (مدير الإضافات) وبعد التنصيب من لوحة التحكم 
كليك على (مدير المديولات) وسيظهر كما في الصورة: 


القلترة: اليحت | | إعادة التديين الموقم ” | | - اختيار الحلة - ” | | - اختزار الموضيع - * | | - اخقيار التو - 7 
ا الأصد الحائف الموضع ات الترتيب النوع الصقتحات 
ل ننصك ورمع زم راععق زات [ :: لاشيء (تقحيل فوري) :: 0 تمك ومع برو راعع وات لاشيء (تقعيل فم 


كما في الصورة اعلاه نضغط على الموديول (5172 1”120 51106511037) وسيظهر الموديول كما في الصورة: 


١/081١ 6: 00967 0 1110‏ 
مزتلم أعم.وام حاءعع0©1]م1 :اتجمع 2 772755202 2:00967 08|18/ا 





50 


مدير الموديولات: الموديول 10_5722_ئ/الا1065101١0100_5‏ 


التقاصيل 

الاسم * 2 ومرن] بالتوراكع لاد 

إظهار العتوان إظهار 1# إخقاع 

الموضيع مع اد عع امممفمطه أمرملع ”* حطبل لجيج 
الحالة غير مور ” 

توي الوصبيول عأاطسع 5 

اركب 1. عمق ورم سمدعع |5 ؟ 

بداية النشر 0000-00-0 00:00:00 | 0 

تاريخ اتتهاء التشر 0000-00-0 00:00:00 | ا 

ماتحظة 

رقم التعريف 058 رتزى وروت بالاو راوع 510 الموشع 
وصف الموديول 52 ووط بلامراذع لازا 

تعيين القاتمة 


113ل الانانام ارقن ١101ؤأاة‏ كناك ماك اأأنمط لاع انا ملوانا م10 لالمعانا ,عجولا 


تبديل التحديد ١‏ الغاء التحديد ‏ | تحديد الكل 


زعي - عدممط 


كما في الصورة والجزء الأول من الاعدادات على اليمين (الاسم) وهو اسم الموديول ويمكن تغييره. (إظهار العنوان) اخترنا إخفاء. (الموضع) 511065 
.(الحالة) ونختار منشور وليس غير منشور. نترك بقية الخيارات وننتقل للأسفل تعيين القائمة ثم (تعيين الموديول) ونختار (على الصفحات المحددة 
فقط) ثم (دادرء1١1‏ مزد1١)‏ ونختار (110:26). 


الجزء الثاني من الاعدادات على اليسار: 





اأآنا5ة عههانأ عا كما 


لاا عت 


لن اانا إلا 


عع لام5 1313] + 
115ملامن) اناعم لزاذ + 
5 [ملامن املق والاقل] + 


خيارات متقدمك + 


١/08 ||: 00967 0 0‏ 
الاكدا 0.01 1م حاعع1 ©1010 :اأهممع ‏ 772755202 2:00967 || ١/608‏ 





ا" 


الخيارات الأساسية: هنا نقوم بتعيين الطول والعرض : بحيث العرض (713001) ونحدد 16١‏ ثم الطول (11©»151:6) حددنا ١٠٠".ننتقل‏ للجزء الآخر من 


الاعدادات :50111 12212 : 


<8ع||) 0ن | لات 





عجار نام 111 12 ]اننا قالاممل * 


2222 لتك موعأقعونا 
تصهيم المواقع الإلكتروتية 
ا شبيح جر اقكس 
شبدت يال ساس 


عنات 


كذهانا 
ماعنا اانا أقاكرممل 2 * 
1121 وسمامع نهنا ممعم * 
101 ناض كر 
قعاعناسث نع سلاوعمع إظيار 3 
1م أه ,مام 3 
1111 تتم اه اع 8# اتحعح 
لمععلام ًا 1118 1 80 تعح 
31ل قاتمراة كا تعح 
عاع ارق تنتوراة 3 1# اتعح 
111302 نات 51 8 8 اتعح 
لمعكام 1 ا عوهقددما لا 80 تعح 


الخيار الأول نختار مصدر المحتوى (0017319(). 2668037) وتعني القسم أو المجموعة ونختار (خدماتنا). 20106238 وهنا نختار آلية الترتيب مثلا 
حسب التاريخء العنوان » الانشاء. (111663 201:061138©) ومعنا نوع الترتيب إما تصاعدي أو تنازلي. (4110015) تحديد المؤلفين للمقالة او من 
ادخلوها. (و»41121 1”636011201) وتعني المقالات المميزة. (511065 04 .7100) تعني عدد الشرائح. بقية الخيارات كما هي مضبوطة أعلاه ويمكن 
قراءتها وترجمتها وستتعرف على وظائفها إلى نهاية الاعدادات. 


الجزء االباقي: 


0 0 00967 :ع |08 
لعلله . اة وكت زو “اإطفوة ا 0 00 1000 





5 


الامكاناطا عرمتوممعم تتملاة أ © تعم 

تع عم ررراموعهم تقاصييل أكلى.. 

5 1118 أأدونا 1# لوالا رتعاع عي أت ذا ملكا 
ألما عا 28 

5 ملام رعفعك 11نمتنا © لناسناياً 312 انا اا قلخا 
111111 ملام موعن 11 

ملق" أععمم عر ل 807 تعح 

للش القسط ددس 1 41 

ولع النقاط تس 1 314 


015 لاون انام رامع لك ع 
115 امل 11011 3ن311] + 


خيارات متشدمك <« 


بقية اللإعدادات كما هي مبينة أعلاه , يتم الانتقال الجزء من الاعدادات (02110125) ؟52077ع5110) : 


15 تمن الام راكع 1ك ب 





غنات | االاقاعنا ص 
عام 1131111 الات علق عع وامرا-رعمتوت * 
القتدعغتررا ااقرقه 

مم5 200 

111 1311 111 الاش الاناعفهعوقع. ممع 1 


لمان ةن 311قل] + 


حيارات متقدمكة 2 


كما نلاحظ أعلاه إعدادات السلايدشو .(1,290116) وتعني شكل السلايدشو 1976©(٠»‏ 4121111261011) نوع الحركة. ([11661721) وتعني مقدار الوقت بين 


كل شريحة. (0)ع576) سرعة الحركة. (1:212511012) 411111211012) نوع حركة التنقل بين السلايدات. 


يتم ترك الإعدادات (1:21:51]1011) 21291526102) و (خيارات متقدمة) ويتم الحفظ. وسيكون شكل الموقع كما في الصورة: 





0 0 00967 :ع |08 
لعلله . اة وكت زو “اإطفوة ا 0 00 1000 


اا" 


دءأعهمك 


تصمح شيكات يلحتت التتيات ويكل احتراقية وتقنم خدعات الصياتة للحاسيات والسيكات 





ملاحظة (ظهور السلايدشو بهذا الشكل لا يعني ظهوره بنفس الشكل ايضا في بقية القوالب وذلك لأن الموديول لديه كلاسات منشأة سابقا للموديول نفسه 
لأن الموديول والقالب تم إنشائهما من نفس الشركة). 


تركيب مدويول (200_1369775_512075_502): مازال موقعنا شبه فارغ ايضا من الأجزاء في الواجهة الرئيسية وبعد اطلاعنا على ( 72/100111 
5 هناك مكان مناسب لعرض موديل إخباري له اسلوب معين في عرض البيانات وهو 5122 5110377 716595 وسيتم تركيبه في المكان 


.)11512( 


نقوم بتركيب الموديول في جوملا أولا من (مدير الاضافات) ومن ثم نذهب لمدير الموديولات وسيظهر كما في الصورة غير منشور وأمامه الاشارة 


9 
الحمراء : 
0 الاسم الحالة .. الموضع رخ الترتيب التوع التصفحات مستوى الوصول اللغة ١‏ ركم التعريفت 

0 5882 بماك دبرعلم 60 :: لاشيء (تفعيل فوري) :: 0 2 بزوطك وبروعن١‏ لاشيء (تفعيل فوري) عزانم الجميع 89 

0غ و5عاعتترث لعبزاعرم © :: لاشيء (تفعيل فوري) :: 1 أرشيف المقالات المحدد فقط عزانم الجميع 21 


نقوم بفتح الموديول وسيظهر كما في الصورة بعد تعيين ما يلزم: 


الجزء الأول من الاعدادات قمنا بعمل المكان في الموضع وحددنا (1:2ع115) ثم الحالة (منشور). ثم انتقلنا للجزء السفلي (تعيين القائمة) اخترنا (على 
الصفحات المحددة فقط) وايضا قمنا بالتأشير على عتصر القائمة (8022) وكما في الصورة التالية: 





0 0 00967 :ع |08 
لقعلله . اة وكت زو “اإطفوة ا 0 00 1000 











التقفاصيل: 

الاسم * 

إظهار العتوان © إظهار 9 إحقاء 

الموضع مضع 
لمن 

مستوى الوصول 

7 

بداية لتر 35 

تاريخ انتهاء النكر 5 

للغة 

ملامظة لمآ 

ركم التعريف 59 552 مراك دوبعلا الموشع 
وصيقف المونيول #.ة لالت كت زه] عانالم الا 5!102 الإقامعان] عبلاعل] إعدرت 51 فصول 
تعيين القائمة 

تعيين الموديول 

قائمة الاختيار- | تيديل التصديد || العاء التحيد | | تيد الكل 


ْ 0113ل الامماخض ْ معاون قأاة أكنائ ماك أأنمط ظ نااك انا ملقانا | مام نامعانز عونا 
تيديل التحديد | | العاء التحديد | | تحديد الكل | 


أي - عمط 


الجزء الثاني من التعديلات: 


عم لان50 13أت] ب 





اناا عسسوذأدنا 1 
نا 11ا112امعا 0013ل * 
مومع ةمه لمكا موعأقعولنا عدم 


تصهيم المواقع الإلكتروتية 





- 
امنا عاونا لعأامعثن * 
121!!؟ ومسامعننا 110 ممعم * 
161 ألا 1 ةبكر نغ 
معاع أرق معن مذوعمآ إظيار يا 
ناز | قاع نأرق +2 
آلاه'زق ا 15لا < 


0-0 ”م /00967 :ع اا ١/08‏ 
اتلك ت 160و اإطووة ا 0 0 10000 


ع .0 م طاععغ]. ثانالا نالا 








اير 


كما نلاحظ الجزء من الاعدادات (ع50111:2 12248) الحقل الأول ((11 ©1121011]) وتعني في حالة كان الموديل لديه (10) له خصائص معينة من حيث 
الشكل الاستايل فإننا نقوم بكتابة اسمه ولآن القالب والموديول من الشركة المصنعة فإن الموديول يأخذ الاستايل الموجود في ال(10) المعين من القالب 
ضمن ملفات ال88©. 


من خلال الاعدادات السابقة اخترنا الأقسام التي ستظهر في الموديول أو المقالات الموجودة ضمن هذه الأقسام. 


إعدادات اانه 29.] ع1)11ى : 


١/08 ||: 00967 0 0‏ 
الاكدا أع0.0أم حاعع0©1م1 :اأجممع ‏ 772755202 2:00967 |8 ١/60‏ 





5 


لل مدير الموديولات: الموديول 502_/ل01١5_51/لا©700_17‏ بي 5خ مخ 6 © + 


حقظ حفظ وإغلاق ١‏ حفظ وجذيذ . حفظ كنمخة إغلاق المساعدة 





69 تم حقظ الموديول يتجاح 
التفاصيل 
1 عع]نا50 0313 < 
الاسم * 2 الاومحات دررع لا 
إظهار العنوان 9 إظهار © إخقاء ازلرت زنك لت ىا تان كي 
7 تبعون - 0 | ا جم|صمامطو ممه 02022222 8 تحذيذ العود 
١ 0‏ 1 
مستوى الوصول |ءناطيم 7 دناه عاعترم 
الترتيب | 1. 582 ورمط5 وسعل( * 100للقم حسام م13 »م5 1 
بداية النشر 0000-00-0 00:00:00 | ا 
ا كت © 9*2 © العم 
تاريخ انتهاء النشر 0000:0000 23 
اللخة | الجميع فق ع لاما 41+ © هع © تعم 
ملاحظة ا 
7 1 ِ خم 1 0 ٠.‏ 
كنرك 89 2 باو رز؟ دبنمل! الموقع أأحمةا باع 1111 05]ملالا * 035 
وصف الموديول 2 300 2.5 101 ع1نانل100/! ,5110 انتدامكانا وبلاعل! بعمهذا5 لرممل بنان 5 6 هد © تعم 
0 حم ةا رع ؤمقما 30 * 05]ملالا 1 0035 
تعيين القاتمه 
تعيين الموديول | على الصقحات المحددة فقطا يذ ١‏ 031 إخقاء 7 
قائمة الاختيار: تيديل التحديد الغاء التحديد | | تحديد الكل 
5 تبديل 9 1 9 تحديد الكل كناك الاورا5 "١‏ ا 1 تعم 
13 أناومام لوط لقااة1أذرامش م550 أأنم نامع اما ملانا م10 نامع انا )عونا 
1م لعأقت بالاولاة 8*9 6 تعم 
تبديل التحديد الغاء التحديد | | تحديد الكل 
. © : 
(©- 00 لاموعقاقت لععادنا © 2 © تحم 
م- مذانا م51 
1 55ة] بالاولاة © 2 ) تعم 
9- - 85ا16ااش 
- - قامذامع ثالا 1 1 
1130 الاو لا5 © 2 ©) تعم 
(9- - 0201135 
9ه - أ09! عوقصم معكامت] *© 2 8 تعم 
9]- 51185 عاملمق5 
6-- 5ةم ممنؤزعمم عوهدما علا ,عقف « #عانؤومة ‏ *" 
5]-- مملاك 
9]- 513101 ألاحملم عاد وأوعقاا عوهدما 000 
5- قعووم عامدمقاع 
لألايلا القمط نط1 155 
للع القنط س1 210 
360 أععمرعم © د<2 ا تعم 
301101ع] /الاولل5 ١/106‏ 50د ©" 2 0 نعم 
00111115 م5110 © 25 تحم 
15 نالا0 51 © 2 © تعم 
اناق عع11 ا "١‏ 82 ) تعم 
حرار 112 "١‏ 82 ]) تعم 
عناص عن01ه00 "١‏ 82 ) تعم 
11م لقأمهح 01 ؟* 
دعاك أه ععطدنسلا 10 
عاي5 ومع اام عده0 0 *” 
ألم /الاولا5 0 2 © تحعم 
3101/5 /الاولا5 60 2 © نعم 
لاقام مأناظ 60 2 © تعم 
م أناط نزقام ينتولا5 © 2 0 تعم 
40 اعم ها عاوزان ! ععبررولم 
مععمة وملكقدوامم 200 
اماع71 3400 امم 2000 
1 لله أمظ أقعما , 


أنام/اة | 5آلانا < 


خيارات متقدمة < 


كما نلاحظ الاعدادات اعلاه لبعض الاجزاء توضع كما هي وبعد الحفظ أعلاه سيتم عرض الموديول في الموقع كما في الصورة: 


: 0“ /00967 :ع |ا8 0 
1ع .0 م طاععغ]. ننانانا نالا 





احلك ات ت 60و اإطووة ا 0 0 ا 1000 
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ستضاقة المواقع الالكتروتيه تصميح المواقع الرسمية شيكات وصياتة حاسوب 
مواحح إوإسد دجم الموائع الرسمد : إوالتصسب لواب 





كما نلاحظ أعلاه تم عمل الموديول في المكان المناسب إلا انه اخذ مساحة من الجانب الايسر بشكل أتوماتيكي أي أن العرض التابع للموضع (056©12) 
يساوي 2010 هنا نريد إضافة موديول آخر وسيكون جامد بدون أي بيانات فقط نص عادي. 


إضافة موديول من نوع ( .1117/11 مخصص): 


قبل اضافة الموديول من صورة (205110115 71001116) نختار المكان المناسب للموديول واخترنا المكان (035611) ومن مدير لوحة التحكم نقوم 
باختيار (مدير الموديولات) ثم الزر البرتقالي (جديد) ستظهر نافذة نختار منها (موديول ,1717711 مخصص) كما في الصورة التالية: 


حدد نوع الموديول: 


2 برام لاك درترع لا 2 ور”رن رززن 511085 
نهولا عاك لاا آخر الأخبار 
آخر 1 21 مين 


5 ا؟ دإارد 
فز شيف المقالا: 
96 - 


5-4 





بعد الضغط على (موديول ,1171711 مخصص) ستظهر الصفحة التالية وبعد القيام بتعبئة البيانات وتحديد بعض الاعدادات : 


111 0 00967 :|08 ا/ا 
كسد أ0.و1مداءعع0]0©1م1 :اأهمع 2 772755202 2:00967 8|128 ١/0‏ 





لل مدير الموديولات: الموديول موديول 1/1 47! مخصص 


الاسم * 

إظهار العنوان 
الموتمع 

الحالة 

مستوى الوصول 
التركتيب 

بداية النتشر 


تاريخ انتهاء النشر 


ماتقوم به رواد التكنولوجيا 
89 إظهار © إخقاء 


عدن اع امممقامطه اوملع ؟ ا تحديد الموضصع 


منشور ؟ 





| ءأتاطنع 0 

1. مهادقوم به رواد النكنولوجيا ” 
١ 00:00:00 0000-00-00‏ 
١ 00:00:00 0000-00-0‏ لك 


| الجميع و١‏ 


50 موديول |1110/1] مختصصس الموقع 
هذا الموديول يتيح لك إنشاء موديول |111[/1] خاص يك ياستخدام محرر )/ا/ا!5 لالالا. 


| وعابة5‎ + ١  هدءووءقماد‎ > 


9 #ن بل 


١4 
|ا"|‎ 
اللا‎ 
لاا‎ 


5 
| 
- 
||ا|ا 
الاج 
للا 


| 
17 6 
0 
م 


52 
ماتقوم به رواد التكتولوحيا 


موقع الكتروني متخصص في تكنولوجيا المعلومات ويقدم خدمة تصميم واستضافة المواقع الالكترونية والتسويق الالكتروني مواقع : رسمية - إخبارية 
- تجارية - تعليمية -قواعد بيانات إعلانات ممولة : فيس بوك - جوجل - نشرات الكترونية رسمية 


7 «< 5110110 دام :لاأوط 


إدراج رابط همقال ! ,]| | إدراج صورة 5 | | تبديل المحرر 


تعيين القائمة 
قائمة الاختيار: تيديل التحديد الغاء التحديد ١‏ | تحديد الكل 
113 أناومام روط لؤااةأذنامش م510 آنا نامع اا ملقانا م10 نامع اا مع5نا 
تيديل التحديد الغاء التحديد | | تحديد الكل 
(ي - عتمم 
]- مذانا غات 
(م- - 5عاعتا'م 
9- - 5 أاطع ايا 
9]- - 001013615 
9]- قأوما 
5]- 51185 عام01 53 
-- ,ةم 
5-- مملات 


9- 513101 لم عااة 
5- 85و23 عامحمقءاع 


كما نلاحظ تم تسمية الموديول بالاسم أعلاه. الخيار الثاني إظهار العنوان واخترنا (إخفاء) والخيار الخاص بالموضع كتبنا أو إخترنا اسم الموضع وهو 
1 ثم تركنا بقية الخيارات وانتقلنا للنص وكتبنا العبارات أعلاه. 


في تعيين القائمة تم تحديد (على الصفحات المحددة فقط) ثم حددنا فقط (1101:16). وسيكون شكل الموقع كما في الصورة: 


0 /00967 :ع اا8 وا 


تاوف لوكت يفي 2 7 :2 |8 ١/60‏ 





اتلك ت 600و اإطووة 


حنلكيةا م13 511 1و0 ] ات حا إنراعة 0101م مارت حن 5 دل لرراع 3 





وءأعهمك 


تبط عشيكات لكت التجيليثة ذيكل أحتراقنة وبتقدم! خدمات :الضبيائئة للحتاسباات رَ!ِلْسَبِكات 


65 )غاصممة 112110116 أد.ه, 





استضاقة المواقع الالكتروتية تصميح المواقع الرسميه 


ماتقوم به رواد التكتولوحيا : جراقكس ومطيوحات 


موقع الكتروتى متخصص في تكتولوجيا المعلومات ويقدم 
خدمة تصميم واستضافة المواقع الالكترونية والتسويق 
الالكتروتي مواقع : رسمية - إخبارية - تجارية - تعليمية - 
قواعد بيانات إعلانات ممولة : قيس بوك - جوجل - 
تشّرات الكنرونية رسمية 
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تركيب موديول (122016_5211©179دك_مك_2200) 


أولا نقوم بعمل مجلد اسمه (511271©_111:2865) أو أي اسم داخل المجلد (121552014) وذلك بالذهاب للوحة التحكم ثم (مدير الوسائط المتعددة) ثم 
نضغط على المجلد (1112552014) ثم نكتب اسم المجلد الجديد (5122716_11225©5) كما في الصورة: 


المئثفات 


" 0 


5-4 


١ك‎ 


705204 1/ق5/1559:6. 5.2 احممه زااتوتام مه ات 55925 أ_ء امدترأة إنشاء مجلد 


0 0 00967 :|08 اا 
الا أع0.0أم داعع10]0©1 :اتلهمطع 2 772755202 2:00967 ع |ا8 ١/0‏ 





"51 


كما نشاهد أعلاه في الحقل ادنى الصورة كتبنا اسم المجلد الجديد ثم نقوم بعمل كليك على (إنشاء مجلد) وسيتم إنشاء المجلد وظهور رسالة نجاح 
الانشاء » بعد ذلك نقوم بفتح المجلد الذي أنشأناه ثم نقوم بالرفع للصور ال5 كما في الصورة: 


المئقات 


6 


ةا 


تك مدر أا_ع ام حر انك "١‏ لتفكودد لقع نوهدم 5 عه |احدردح [اتكتدنام دروا اإتشاء مجلّد 


3 


رقع الملقات (الحجم الأقصى: 10 1/18) 


| عالط ععمورات | © معااة؟ 


بد الرقع 


من خلال (اختيار ملفات) أو (5وع1"1 ع21005)) نذهب للمجلد الذي فيه 5 صور ونضلل عليها كاملة ثم نضغط على (بدعء الرفع) وستظهر الصور في 
المجلد الذي أنشأناه كما في الصورة: 


المئلقات 
60 هع نكم د م 
ع ساكس شسفمهم اه 5 لمر موفضري فتن يديد 
9 | 9 ا 9 9 © ا 9ه 
015.9 09م 521 511021509 ومم. 511022 م.5023 مم .طعثنر 
6525| _ع امذو أة ك1 5/157520 :5/1572 . 52 تممه ز وام 0 إتشاء مجلد 


نقوم الان بالعودة إلى لوحة التحكم ثم (مدير الاضافات) نقوم بتنصيب الموديول ثم من لوحة التحكم مرة أخرى ثم (مدير الموديولات) وسيظهر الموديول 
كما في الصورة (اشارة حمراء أمامه) : 


١/08 ||: 00967 0 01‏ 
لالتحا أع0.0أم حاعع0©1م1 :اأجممع ‏ 772755202 2:00967 |8 ١/60‏ 








عانال10/] لرعااةي) ع39ت1ا عامدواة 





الموضع .د الترتيب التوع 


0111 ع1130! عاماراد 


لاش).ء (تقعيل قوريى) 0 لاشء (تقعيل ثورء عإإطنم 
١ 60‏ ات عاناكوار! ١‏ نمت . 


5ع اء ألم لع/االامم © لاشيء (تفعيل فوري) 


1 شيف 


لعقالات لمحذد فقط ع |أمطنام 


نفتح الموديول (©7100111 211619 1212856 »[مددز5) وسيظهر كما في الصورة (بعد عمل الاعدادات اللازمة) : 


0 ا 0 ْ عي اخ مخ 6 © + 
مدير الموديولات: الموديول /[0311_ع1م511_م100_5 6« 
حفظ حفظ وإغائق حفظ وجذيذ حفظ كتمخة إغاق العمائهدة 
لتفاصيل : - 
الخيارات الاساسيه 
آالآسه * أصور مختارة ' 
018101 15130 6759025أ_ء امحمأه 14 579520 أل5ق2و373ا ١‏ 
إظهار العنوان © إظهار إخقاء ١‏ 5555 
“م 1) أل الالا اخلط 1اناطا 1) 60 
الموضع 2011 أأع لمم م00 الماع 5 م1 “م 10) أطاواع ب 7760301نا )11‏ 320 
الحالة هنثور ؟ 30 أعع محم مرعع>ا 0لا ا وعم[ 
مستوى الوصول عذاطنه ؟ 
5 5107لان) م10 عتر5 522931220 :2222 505134 عدم 1 : «عقعمط 
الترئيب 1. صور هختارة . " 2222 :21122 و2531 زعدجو5 : 25359 زعدور5 : 
بداية النشر 0000-00-0 00:00:00 | 2 
تاريخ انتهاء النشر 0000-00-0 00:00:00 0 | 5 
اللغة الجميع آي 
مااحظة 
رقم التعريف 591 عاناله1/! بمعالد6 عوددما عامدرز5ذ الموقع 
“011 قاع 23 ذل © 0010015 لالز 
وصف الموديول 11120 511010 ااانا 1100101 1115 - ع100101! باع0211 1120 عام اذ بعم1513لزممل 


]|1 اذ ونواكنا برع اهن 


4 خيارات متقدمة 


سار القائمة 


ل 


113 أناوراءم ملعق2 لؤوأاة ادزام م50 اانا نامع ا/! لملوانا م10 نامع اا ,عونا 


- عممرهنم 

- م136! 511 

- - 1685م 

- - 0165 امع نالا 

001113615 - - 

- 0901 ا 

- 51185 1م5317 

- - 3165م 

- - م510 

- 15113101 أتضلم عااه 
- 2305 ع1امتة»«ع 


الإعدادات في الجزء الأيمن معروفة الزيادة هنا اختيار الموضع (70160111) ثم حددنا (على كافة الصفحات) في الجزء الأيسر وهو الأهم في ( 1012286 
116017) هنا سيتم عرض جميع المجلدات الموجدة لدينا ومن خلالها نختار المجلد الخاص بنا (5112716_11221:285©5) والموجود في (111552014) 
كما في الصورة يظهر المسار الخاص به. الحقلين الذي يلي المجلد هما للطول والعرض للصور. بقية الاعدادات نتركها كما هي وسيظهر الموديول في 
اسفل الموقع كما في الصورة: 


0 00967 :ع اا ١/08‏ 


أ جا. 0 1ج حاعع]. الالانا الا 2 00967 :2 |8 60/ا 


اتوك و1111 المسفوة 





5 


إضافة موديول فيديو (25ز_71©_901043576تزى_مكد_200م) 


عبارة عن موديول خاص بعرض مقطع فيديو مستورد من موقع اليوتيوب. بعد رفع وتنصيب الموديول ومن لوحة التحكم (مدير الموديولات) وسيكون 
الموديول بعد تنصيبه كما في الصورة: 





لع الاسم الحائة الموضع .ث الترتيب التوع الصقحات مستوى الوصول الله رقم التعريف 
ا عطلالأناملا عاملماة مه 60 :: لاشيء (تفعيل فوري) :: 0 عطنااناهم/ عاممرزة م5 لاشيء (تفعيل فوري) عناطنط الجميع 92 
لا 5عاعتارث لع/زراعرم © :: لاشيء (تفعيل فوري) :: 1 أرشيف المقالات المحدد ققط عتامطنم الجميع 27 


وقبل فتح الموديول نختار مقطع من اليوتيوب حسب متطلبات الموقع وكمثال لدينا المقطع كما في الصورة: 


7 [#دمما 1 6 2 4# ب نار - بطع 1ج /نرصرمء.ع طن نام نا لفارناينا ل 


91 1 


وداحه الله | صائج اليامي - 2<[ الا 


0 ١ 01 1010 


كليب قطر السحايه || صائح اليامي 0 531 
له ده 8 /ز 


7, 


ساد ساعة ]| صفح بابي 7012 
المولالم طع581 بز 
1/5 227,827 | 


يأمرحيا | ادا صالح اليامئن و خائد المرى | اؤويريت 
جاترّة الشيخ مران ين قويد 2014 
نما ذك' 1 0 


كلئيب درس الليالي (]1] | صالح اليامي 5211 
أتمق نزام 
اث 5-011 3 


كما في الصورة أعلاه لاحظ الرابط الخاص بالمقطع سنقوم بنسخ ما بعد علامة - فقط 


(57م:0 1117064 -:21/15526»1175ه».11460://553333:.5:0114111) بعد نسخ الموضح باللون الأصفر ننتقل للموديول وكما نلاحظ في مدير 


المديولات اسم الموديول (©570114112 »1 مددرةك 52) نقوم بفتح الموديول وسيكون شكل الموديول مع اعداداته كما في الصورة: 








١/08 ||: 00967 0 11111 
١/60 8|115 2:00967 772755202  عموهتا: لكا أع0.أمحداعع60©1م1‎ 














للك 1 1 ؛ ج, > 
سحت مدير الموديولات: الموديول ©11ا]لا0لا_©1م511_م100_5 ي 0 ما لغ 9 46 


1 
اع احفت وجديد حفظ كتسحه اخامة المساحدذة 


و تم حفت الموديول ينح 


لتقات 8 . 9 
الخيارات الاساسيه 
الاسم * ل 
أأألات 01355 عانالهاا 
١0‏ مع0آ/ا عطناأناه/ا لخم 0 شكلان معلا 
الموضع 202 لي عع عات ؟ تحديد الموضع جل ابابا 250 
الحالة متشور 3 أاواع م 100 
مسدوى الوصول عأاططنم سأ 0001 ©) واطومع 01536 
الترتيب 1. فيديو ” 
بداية النشر 0000-00-0 00:00:00 | 5 
3 1 4« خيارات متقدمة 
تاريخ انتهاء النتشر 0000-00-0 00:00:00 | 50 
اللغة الجميع آي 
ماعطة 
رقم التعريف 92 عاناأناملا عامرز5 م5 رمع 
وصف الموديول 1.71 001115112306ل لط 0011112ل 10 100101 عانكناملا 
تعيير القائمة 
تعيين الموديول على كافة الصفحات ؟ 
قائمة 1 خديار: 
713 أناممام قم روااةأذراش م510 أن نالع أ/! متلوانا م10 نامع ارا ععونا 


- عمممت 

- م13 511 

- - 16185أام 

- - 1)5 0 أامع لاا 

001113615 - - 

- |00 ا 

- 51185 1م5317 

- - 3165م 

- - م510 

- 151153101 لولم عااه 
- 23085 ع1ام57ة»«ع 


كما نلاحظ الصورة أعلاه أضفنا بعض الاعدادات (الاسم) تم تعديله كما في الصورة واسميناه فيديو ثم (إظهار العنوان) كما هو عليه ثم حددنا 
الردرون)زوه20) واخترنا (60160122) ثم انتقلنا إلى (تعيين القائمة) وحددنا (على كافة الصفحات) . في الجزء الثاني على الجهة اليسرى حددنا 
(10 710605 770143526) ووضعنا الكود الذي نسخناه من رابط المقطع ثم الذي يليه حددنا الطول والعرض تمنا بالحفظ. وسيكون شكل الموديول كما 
في الصورة: 





تم تعيين الموديول في المكان الذي حددناه وهو (20160112) . 


0 00967 :ع اا ١/08‏ 


أ 0.1 1ج جاع ع]. مالالا نالا أعم.وأمحاعء0©1]مأ :تدمع 772755202 2:00967 8|118 0/ا 








تركيب موديول من نوع ,17511711 مخصص 

سنقوم الان بعمل موديول جديد ونضع فيه بعض التفاصيل حول مالكي الموقع وسيكون من نوع ,111711 مخصص بنفس طريقة عمل الموديول 
السابقة الذي بعنوان (ما تقوم به رواد التكنولوجيا). 

سنقوم بعمل الموديول في المكان (10140113) وسيحوي بعض البيانات والأيقونات الخاصة بالموقع وسيكون كما في الصورة: 


> لاأمقءوةقم > وعابا5 | 2 د جع > | عع 11 


2 #ن- كة بل ا ا‎ ©9( ١ 
2 


منطلاودم 


رواد التكنولوجيا شارع حدة 
تلفوت : 00967714490030 

تلفاكس : 00967714490030 

البريد الالكتروني : 80[/2100.0177 أناكثالا_لمة 
جوال : 714490030 


أو عبرصفحاتنا الاجتماعية 


ما سس 


إدراج راب 





عمل روابط أيقونات الصفحات الاجتماعية: 
تظهر أعلاه وكما في الصورة أيقونات خاصة بالمواقع الاجتماعية (فيس بوك - تويتر - يوتيوب) ولكي نقوم بعمل رابط للصورة ومن خلال الرجوع 
للموديول نقوم بعمل كليك على الصورة ولتكن الفيس بوك ثم الضغط على ايقونة الحلقة كما في الصورة: 


0 00967 :ع اا ١/08‏ 





تلوف »لوكت ليا الطيية وا ل ل 00 





تص 
> تاموءوومدهم ١‏ > وعارةز5 | ك5 3 2 ع | عه ن م 8 
© 7 [8ه] بذ 83[95]| هت ت | يه 2 | < <: 
ممسد سم [١١‏ اما 
رواد التكتولوجيا شارع حدة 
تلفوت : 009677144900310 
تلفاكس : 009677144900310 
البريد الإلكتروني : 015ع.8100/[© ياكيالا_مه 
جوال : 714490030 
أو عبرصفحاتنا الاجتماعية 
100 
7 وما د متطقوم 
إدراج رابط مقال [ | | إدراج صورة 89 | | تيديل المحرر 
٠ 5‏ 0و ٠‏ في هى 4# ٠‏ © » 5 مو 
يعد الضغط على ايقونه الحلقةه ستظهر النافدة التاليه: 
٠‏ فآ آيم] 
مخرجات تخصصه 
تص 
> دامةئوق3ت5 > وعابرز5 || 3 3 2 ع | عم ن م 8 
, ا > هع د ِ 
ل )آل 1 1 و اص 
رواد التكتولوجيا شارع حدة برص نكمم ألع/ه أ لع مم /2.5_ذادرمه (/أدوهطاقهها ذا 
تلفوت : 00967714490030 0ك 
تلفاكس : 00967714490030 انا عامنا 
البريد الالكتروني : 8100.6017(© يزو يالا_0ع +732 
جوال : 714490030 عل ا[ سسا 
أو عبرصفحاتنا الاجتماعية ددةاء 
1 نيهم 
19 دام :رثدم 


كما في الصورة أعلاه بعد ظهور النافذة التي في الصورة نضع رابط صفحة الفيس بوك في الحقل (,11101 1,11) وكذلك بقية الأيقونات بنفس الطريقة. 


0 /00967 :ع اا8 وا 


.0ه اع ع]. /الالالا الا أعم.وأمحاءعع]0©1)م1 :نومع 772755202 2:00967 ١/08/1118‏ 








واثو وو 55 2ه 
إنشاء القائمة وربطها بالأكسام 
تعتبر القائمة الخاصة بموقع جوملا من أهم الاجزاء فعن طريقها يتم ربط الأقسام الموجودة ضمن الموقع الالكتروني. عناصر القائمة أنواع حسب 
الصورة: 


اختيار نوع عنصر القائمة: 
جهات الاتصال المقالات 


جية اتصال واحدة جميع المجموعات 

جهات الاتسال للمفيوة محسو غلة دوق 
مسجسو غة 1كة 
المقالات المميدة 


اتشماع معالة 


الباحث الذكي التفذيات الإخبارية 


البحت جميع مجموعات التغتيات الأخيارية 
8 و 5 ف 82 > يود 


مجموعة تعذية أخيارية واحدة 


مدير ١‏ لمستكة هين 


ملف المعتخدم الشخصبي 
إعادة ضيط كلمة المرور 


دليل المواقع 


جميع مجموعات دليل الموافع 
مجمو عة دليل سراقم واحدة 
إرسال رابط موقع 





الأكثر استخداما هي أنواع العناصر للقائمة في (المقالات) وكما موضح أعلاه بالاسم : 

أرشيف المقالات : تعني أرشيف للأخبار والمقالات لأشهر وسنوات. 

مقال مفرد: وتعني مقال واحد مثلا عنصر القائمة المسمى (اتصل بنا) عن الضغط عليه تظهر صفحة واحدة هنا نسميها مقال مفرد. 

جميع المجموعات: وهنا يظهر جميع أقسا الموقع. 

مجموعة كمدونة: وتظهر فيها أقسام المدونة في جوملا ولا تستخدم بكثرة. 

مجموعة كلائحة: هنا يظهر قسم واحد فقط فمثلا (قسم التصميم) عن الضغط على عنصر في القائمة من هذا النوع تظهر مقالات هذا القسم فقط. 


المقالات المميزة: وتستخدم في القوالب القديمة ونادرا في الجديدة بحيث اذا تم تعيين عنصر في القائمة بمميز فاإننا نختار القسم الذي نريد عرص 
مقالاته أو أخباره المميزة. 


إنشاء مقالة: هنا لو أردنا عمل عنصر في القائمة للمستخدم المخول له بكتابة مقالة. 


في مثالنا أو الموقع الذي قمنا بإنشائه لدينا قائمة جاهزة وسنقوم بتعديل وإضافة عناصر جديد للقائمة وسيكون ذلك عن طريق لوحة التحكم ثم ( القوائم 
) ثم نختار (1261111 7123112) كما في الصورة: 


١/081١: 00967 0 111‏ 
كسد أ0.و1محاءعع]0]0©1ض1 :اتأهمع 2 772755202 2:00967 8|115 ١/0‏ 








.ع مدير القرائم 


5 نامع انا ,عونا 


4 

1 14 5-4 لد 

ن 5ل ١‏ ْ سله 
41 


|] || 
| 1 1 
10 





1# ذاومهل شامنات 


إضاقة مقال جديد مدير المجموعات قدير الومائط المتحددة مدير القوائح دير الستخدسين 


وا هاموه مقالقككناتض 


لاع انآ منقاكا ل إضاقة حتصر قائمة جذيذ 





هه 2 ١١‏ اناما 7 
مدئدك 
كه نك كه 
مدير الفونيولات نير الإضاقات مدير اللقّات الإعدادات العامة دنا 0 
لديك ضر تسهة من جوهاة] ديك آخر اصدذار هن كل 
الإضاقات 


وسيتم فتح عناصر القائمة (13261201 7123112) والتي هي القائمة الرئيسية وستظهر عناصرها كما في الصورة: 


القوائم عقاصر القائمة 
القلترة: البحت | | إعادة التعيين نامعان! دذدال! “" | | - تحديد الحد الأقصى للمستويات - _ ” | | - اختيار الحالة - ” | | - اختيار مستوى الوصول - 
لا الاسم الحائة || الم الترتيب ذ مستوى الوصول توع عقصر القائمة 
م 7068لا ن . يتن فد ىد 
ل © 1 عانم المقالات » العقالات المهميزة 
(الاسم المستحار: عو هم ع507) 
2 3 511 | 
١ ١ 4 .‏ © 2 © 6 عزانم المقالات » مقال هفرد 
(الاسم المستحار: م5116-738) 
01 5 ع نالمش 
لا 1 3 عتاطنم المقالات » جميع المجموعات 
(الاسم الستعار: هعاع1ا8) 0 1 
| 15 أاطع نالا : 3 
ع 2 0 6 عانم دليل المواقع »م جميع مجموعات دليل المواقع 
(الاسم المستحار: يل تاحاع /«) 6 المواقع » حككر المى 
ب 020115 
لس 3 6 ع نانم مهات الاتصال » جميع مجموعات الاتصال 
(الاسم الستحار: ك5اع601113) 0 ْ 00 5 5 
001 ا 1 
لا 2 0 6 ةانم هدير المستخدمين » تموذج تسجيل الدخول 
(الاسم المستعار: 100[0) © « ج 
م 5185 531016 
لس 4 09 © عزانم العقالات » مقال مقرد 
(الاسم المستحار: 5ع511-ع1م5811) 9 00 
م 3165م 530 
1 0 اأطنم د اق 
لا (الاسم المستحار: 8715م) 6 1 إن تعتصير 
- م50 [ 506 
لا 2 © أطنم اسم مستعار لعتصر قائمة 
(الاسم المستعان: م5100) 0 اا 
() 553605 ألالملثم عااد © 5 0 © عانم عنوان إتترتت خارجي 
5 25 6 1ام0ةع زب 8 © عزاطنم اسم مستعار لعتصر قائمة 


(الآسم المتعار: 5ع 0وم-عامرقاع) 


بعد ظهور العناصر كما في الصورة اعلاه نقوم بالضغط على العنصر 1510116 وستظهر الاعدادات الخاصة به كما في الصورة : 


: 0 00967 :ع اا8 0لا 
ع .0 م طاععغ]. ثانالا نالا 


اتاو »وات 00 6زوا الضيوة 2 /0096 :2 ع اا8 0لا 





57 





الموقع الفستخد مين الشوائح المحتويات التطبيقات الإضانات المساحدة 


07 عد القو انم" تعديل عنصر القائمة 
37 ير القوانم: تعديل عنصر 


التفاصيل 

نوع عنصر القائمة * المقالات المميزة | تحديد 
اسم القائمة * الرئيسية 

الاسم المستعار 292م50072 

ملاحظات 

الرابط لع 7لا مدع أع بع أنيقأمع1مهه_جمموحوه نأمهت مم عع 100 
الحالة هنشور 7 

مستوى الوصبول عأاطيع ؟ 


<ه لايوجد أعضاء داخل الموقح #2 1 عضو ناخل الإدارة “> لاتوجد رمائل 8 معاينة الموقح ([© تسجيل خروج 


> خيارات تموذج العرض 


اختيار المجموعات 


ي فم يخ ثم © +4 


حقظ حفظ وإغاكق حفظ وجذيد حفقظ كتسخة إغادق العماعدة 


0 كل المجموعات 3 ا 
0ع15)موع همهملا 

تصهيم جرافكس 

صينة حاسوب وثبكات 

عام 

خدهاننا 


إذا تركت الحقل قارحا » سيتم استخدام الإحدادات العمومية. 


كما نلاحظ أعلاه قمنا بالتعديل فقط في اسم القائمة وغيرناها من ©1102 إلى ( الرئيسية ) فقط ثم (حفظ وإغلاق). نقوم بمعاينة الموقع وسنرى التغيير 


في عنصر القائمة (الرئيسية) كما في الصورة: 


الرئيسية مد1/! :51 و0 | 5 عأم52301 


112607 الم مارت د5ع230 عاملمج2»اآ 





ءلع556 


سنقوم الان بالعودة للعناصر في القائمة وسنقوم بفتح العنصر (222 ©511) وستكون اعدادات العنصر كما في الصورة: 





الموقع | المستخدمين | القوانم | المحتويات | التطبيقات | الإضاقات | المساعدة 


.8 مدبر القوائم» تعديل عنصر القائمة 
7 ير القوانم: تعديل عنصر 


التقاصيل 
نوع عنصر القائمة * أمقال هفرد تحديد 
اسم القائمة * م3/ا 511 

الاسم المستعار 5112-5 

ملاحظات 


0 لايوجد أعضاء ذاخل الموقع د 1 عضو ذاخل الإدارة 5 لاتوجد رمائلن © هعايتة الموقع © عمجيل خروج 


*» الإعدادات المطلوية 


اختيار مقال نا 


4 إععندادات المقالات 


مي قت كا 6 © ح+ة 


حقظ حفظ وإشاكق حفظ وجذيد حفظ كتسحةه إخاكق العماعدة 


أمدانا 511 اختيرإتنيير 


كما نلاحظ أعلاه نوع العنصر للقائمة عبارة عن مقال مفرد وسنقوم بتغيير النوع إلى مجموعة كلائحة كي تعرض لنا مقالات في قسم معين وهو قسم 
خدماتنا. لذلك لدينا اربع خطوات هي تغيير النوع ثم تغيير الاسم ثم تغيير الاسم المستعار لاسم آخر (اي اسم مناسب للرابط) ثم اختيار القسم 


تغيير النوع وذلك بالضغط على زر (تحديد) من أمام (نوع عنصر القائمة) وستظهر النافذة التالية: 


0 00967 :ع اا8 ١/0‏ 
2 2:00967 اناا 


وت لضسووة 





ع .0 م طاععغ]. ثانالا نالا 


اختيار نوع عنصر القانمة: 


جهات الاتصال 

جميع مجمودات الاتصال 

مجهوعة اتصال واحذة 
جر |5 

جية اتصال واحده 


جهات الاتصال | لعمير : 


إظهار لائحة من العقاةات في مجموحة. 
التغذيات الاخيارية 
اب ك6 التغديات الإخبارية 
مجموصة تغذية أخبارية واحذة 


تغذية أخبارية هفرذة 


مدير المستخدمين 


6ه كش ١.‏ 
35 الذحو 
تعوذج تجيل الذدخول 
لف المتتدم الشقصن 
2 
- يل ١‏ 5 1 - 2 5 |اء - 0 
- 
-١ : -‏ 1 
تهودج اللجيلن 
1 ست 3 + 
هب اندكئير بلهد المنلكدد 


> _ه و حل > 
اهذه | 
إننا صيص كقمة المرور 


دئيل المواقع 


فءه- 539.4 8 3 

جميع مجمهوعات ذليل الموائع 
2 136 3 - 

امجهو تدك ذليلن موائع واحدد 


1 50585 1 
إرسال رابط موقع 





كما في الصورة أعلاه بعد ظهور النافذة أعلاه نقوم باختيار (مجموعة كلائحة) وسيتم ارجاعنا على العنصر الذي نريد تعديله كما في الصورة: 





الموقع المستخدمين القوائح المحتويات التطبيقات الإضاقات المساحدة #2 لايوجد أعضاء داخل الموقح #2 1 عضو داخل الإدارة “>) لاتوجد رمائل © معايئة الموقح ([ تسجيل خروج 


حقظ حقظ واشامق حفظ وجذيد حفظ كتسخة الساعدة 


.8 مدير القوائم: تعديل عنصر القائمة فخع مخ 6 0 4 





التفاصيل : 
الإحدادات المطلويه 
اختيار المجموعة * 
اسم القائمة * كدماقتا م015 وع0512 0لا 
1 تصميم المواقع الإلكترونية 
الاسم المستعار ع5_آناه 3 ذ 
00 4 خيارات المجموحة 
لاحظات 
4« لاتحة التصميمات 
الرابط 06 وك هع اك أنني 00012014 _الممدحومه أأمه مام .عع 100 
4 إعدادات المقال 
الحالة هنشور آي 
١‏ 4 خيارات الدمج 
مستوى الوصول عأاطنم ,5 
١‏ 4 خيارات توع الرابط 
مكان القائمة * نامعانا! مأداا , 
١‏ 4 خيارات عرض الصفحه 
العتصر الام جنر عنصر القائمة ا 
4_خيارات الكلمات المقتاحية 


نلاحظ أعلاه قمنا بالتالي : ١‏ تغيير نوع العخصر إلى (مجموعة كلائحة). ؟- اسم القائمة غيرناه إلى (خدماتنا) 7- الاسم المستعار وضعنا اسم مختصر 


بالإنجليزية وهي اختياري ويمكن تركه فارغا. 4- على اليسار اختيار المجموعة واخترنا (خدماتنا). 


بعد الحفظ والإغلاق نقوم بمعاينة الموقع وسيكون شكل القائمة كما في الصورة: 


خدماننا نوه | حت حل نامك 601110 عات 5ع230 عامدم داع 





5ع مام 
5 اطع اا 


20115 


وبعد الضغط على خدماتنا ستظهر الصفحة كما في الصورة: 


,5 0 مم7 /00967 :ع |08 
ع .0 م طاععغ]. ثانالا نالا 





اتلك ت 160و اإطووة 0 ا 100000 


الرئيسية مات 0001 | حت حل إرياعك لولم عارت د5ع230 عامدمقعاا 





2ء(ع6م5 





شركك و رقة عقو كتب بواسطة: ]58لا ]عمنلا5 0 
تصميم جراقكس كتب بواسطة: ]ع5لا ]ءمنا5 0 
تصميم المواقع الإلكترونية كتب بواسطة: ]58لا ]منا5 1 





نلاحظ كيف ظهرت عناصر أو مقالات القسم (خدماتنا) كما في الصورة أعلاه. نقوم الأن بالعودة الى عناصر القائمة وكما في الصورة التالية سنقوم 
بحذف العناصر الزائدة تحت عنصر القائمة (خدماتنا) : 


القلترة: البحث إعادة التعيين نامعان! متهانا * | | - تحديد الحد الأقصى للستويات - ” | | - اختيار الحالة - ” | ١‏ - اختيار هستوى الوصول - “* | | - اختيار اللغة - ___ ” 


5 الاسح الحائة ع | الترتيب ات مستوى الوصول نوع عقصر القائمة 8 الئغة رقم التعريف 








(الاسم الستعار: عوقمع072) ث 1 9 عنام المقالات » المقالات المميزة 55 الجميع 435 
7 0 ر: 0م 5-]1نا0) © 3 © 6 عانم المقالات » مجموعة كلائحة ع 294 
9 عومد : قعاء11ق) 6 : 0 انام اللقالاتى جميع البيعوهات الجميع 2530 
. حيودينه 5 تامع ر,) ث 2 © 6 انام دليل المواقع » جميع مجموعات دليل المواقع الجميع 438 
8 مووي ث 3 6 ع انام جهات الاتصال » جميع مجموعات الاتصال الجميع 439 


(الاسم الستحار: كأع60113) 


كما نلاحظ أعلاه تم التأشير على العناصر المندرجة تحت العنصر (خدماتنا) ثم الاتجاه الى اعلا لوحة التحكم واختيار (حذف) وسيتم حذف العناصر 
ويمكن معاينة الموقع ولن نجدها تحت العنصر(خدماتنا) 


نعود الآن الى عناصر القائمة مرة أخرى وكما في الصورة: 








الفلترة: البح> إخلاة لأتسري: امعان منداا “" | | - تحديد الحد الأقصى للستويات - ” | | - اختيار الحالة - ” | | - اختيار مستوى الوصول - “ | | - اختيار اللغة - 2 " 
لمقمة 
الاسم اله 89 الترتيبا .ة مستوى الوصول توع حتصر القائمة ا اللغة ١‏ ركم التعريف 
6 © 1 نت عتاطنام المقالات م المقالات المميزة 5 الجميع 435 
(الاسم المستحار: ع 80مع017١)‏ 
خدماتتا 
0 | © 2 © 6 عتاطنام المقالات » مجموعة كلائحة الجميع 204 
(الاسم المستحار: لكاع5-]انا0) 
001 ا و هه 1 ف 2 ل ات 1ه / 
ا ١ 1 ١‏ © 3 عزانم مدير الستخدمين » تهوذج تسجيل الدخول الجميع 2133 
(الاسم المستحار: [100) 
565 عاماصمد5 : ا ات . 
د : 1 © 4 © 66 عانم المقالات » هقال هقرد الجميع 238 
(الاسم الستحعار: هع 51-ع1م821ة) 
3115م 506 
ش © 1 و ع نانم اسم مستعار لعتصر قائمة الجميع 445 
6 (الاسم المستحار: 8115م) 
م50 1 00 
0 © 2 6 عنامانام اسم مستعار لعتصر قائمة الجميع 446 
(الاسم الممستحار: م0١51)‏ 
5 51310أمالملث عاات © 5 6 ع انام عتوان إتترتت خارجي الجميع 448 
25 1م2351 5 
الايد © 6 6 عامانام اند مكار قحس كش 50 455 





(الاسم الممتحار: كع 30م-ع1م81اع) 


من الصورة أعلاه العنصر (1ع1,0) سنقوم بتغييرها على (حول رواد التكنولوجيا) والتي هي عبارة عن معلومات حول رواد التكنولوجيا وقمنا سابقا 
بعمل مقال اسمه (من نحن) سنربط هذه العنصر بهذه المقالة وبهذا يكون نوع العنصر في القائمة هنا (مقال مفرد). وسنقوم بالخطوات التالية: 


0 00967 :ع |8 ١/0‏ 
تلوف اة لوكت 011لا العليية 2 00967 :2 اا ١/08‏ 


1ع .0 أم طاععغ]. ننانانا نالا 








ع .0 م طاععغ]. ثانالا نالا 


فتح العنصر (2زع1.0). 

تغيير نوع القائمة إلى (مقال مفرد). 

تغيير الاسم الى (حول رواد التكنولوجيا). 

تغيير الاسم المستعار الى اي اسم او تركه فارغا. 
اختيار المقالة من الجهة اليسرى من الاعدادات. 


وسيكون التطبيق كما في الصورة: 


التفاصيل 

توح عتصير القائمة * قال هقرد لحي 
اسم القائمة * 1 1 

الاح الستحار وأم_طعهة_أاصطوه 

الرابط ع اأمدعيع | ارمع ارممع_ومممعحوره اأمه” ملام ععلرر ا 
الحالة متشور * 

ستوي الوصول عأاطيع د 

مكان القائمة * لامعانا منهايز 0 

العتصبر الأم جتر عنص القائمة * 

الترتيبه مأوما ب 

طريقة فتم النافذة القالعة الام ف 

الصمقحة الأاقتر آضمية "ع 5ه" عم 

اللّحة لُجميع + 

تمط القالية - امتضكم الاق راي - 5 

رقم التعريف 200 


كما في الصورة أعلاه من الجزء الأول من الاعدادات قمنا بتغيير النوع للقائمة وبنفس الطريقة السابقة بعد الضغط على (تحديد) ستظهر نافذة نختار 
منها (مقال مفرد). نقوم بتغيير الاسم الى (حول رواد التكنولوجيا). نقوم ايضا بتغيير الاسم المستعار لأي اختصار او اي اسم. 


في الخطوة التالية من الاعدادات على اليسار وكما في الصورة : 


> الاعدادات المطلويه 


| جه وشم اع احج تيدع 
اختيار مقال اختيار هقال لختيار 'إتقسين 


كما في الصورة أعلاه نقوم بالضغط على زر(اختيار/تغيير) وستظهر نافذة كما في الصورة: 


وت لضسووة 


0 00967 :ع اا8 ١/0‏ 
2 2:00967 اناا 





إل حثك إعادة لت 


- اختيار المجموعة - 
ع5 أبموع نمه ملا الوصول جمو ته غه تاريخ الإنشاء ١‏ ركم التعريف 
تصميم المواقع الإلكترونية 
1115 13101 لمش تصهيم جراد رم 15 )00 الجميع ‏ 2011-01-01 
صيفة حاسوب وشبكات 
عانانه اا ع اعم اعم > 82 15نا00!!! 4م2004 الجميع ‏ 2011-01-01 
|أخدمانا 
عاناله1!! كع لموع1ة0 عاع نارمش عانم كعانال10/! اأمعاممن الجميع ‏ 2011-01-01 








عانانل10! بصموعم قن كععأاءع نارمش ع انام كعاناله1/! أمع مم0 لحي 2011-01-1 


23 3130 1أذنامش ع اطنط ع5 يروم الجفيع 2011-01-1 











صصغخهم ‏ ل+مهط4 نحل عتلطدرص عصتم راص اأجدهد» 11 1 720111 


كما في الصورة أعلاه نختار القسم أو المجموعة التي تتضمن المقالة التي كتبناها مسبقا (من نحن) وقد وضعناها في قسم (عام) وبعد اختيار قسم عام 
ستظهر المقالات التي فيه كما في الصورة: 


اليد إعادة التعبيد 


مستوى الوصول جسراصة لغة | تاريخ الإنشاء رقم التعريف 
عزانم عام الجميع ‏ 2014-05-12 78 


عزامناظ 1 الجميع ‏ 2014-05-12 77 


7 20 


حول روالد التكتولوجيا ات 2رة 1111117 لم عااك حك يي 2 زرا 2 





5562 


وعند الضغط على زر القائمة (حول رواد التكنولوجيا) ستظهر الصفحة التالية: 


الرئيسية خدماتنا حول رواد التكتولوجيا حل إرراعكة لم عازه ل د 





وءأعمهمدك 


من نحن 


كتب بواسطة: ]ع 5لا ]منا5 لمجموعة: عام 9غ الزيارات: 1 بق © 
لك الل ل ها 
رواد الدضولوجيا 
موقع إلكتروتي متخصص في تكنولوجيا المعلومات ويقدم خدمة تصميم واستضاقة المواقع الالكتروتية والتسويق الالكتروتي 
مواقع : رسمية - إخبارية - تجارية - تعليمية -قواعد بيانات 
إعلاتات ممولة : فيس بوك - جوجل - تشرات الكتروتية رسمية. 
السايق 


0 00967 :ع اا08/ا 
اتلك ت 160و اإطووة ا 0 00 ا 10000 


ع .0 م طاععغ]. ثانالا نالا 














5 / 


نعود الان للقائمة الرئيسية وكما في الصورة: 





ساي البحت | | إعادة التعيين نامع اا مأدانا " | | - تحديد الحد الأقصى للمستويات - ” | | - اختيار الحالة - ” | | - اختيار مستوى الوصول - " | | - اختيار اللغة - 2 " 
9 . الصقحة 

الاسم الحالة أب الترتيبا حث مستوى الوصول نوع عنصر القائمة ا للقة م التعريف 
يقي : 30م501718آ) 0 1 9 0 ماي ويد لما الجميع 5 
0 0 © 2 © 6 عنامانام المقالات » مجموعة كلائحة الجميع 294 
ف - ا 0 ب 99 د 0 الجميع 233 
2 0 0 9 4 و ه عانم الفقالات > مقال مقرد ف 238 
يقر 25-535 © 1 0 عزاطنم اسم ستعار لعنصر قائمة الجميع 445 
عي : مو0اى) 6 - 6 عأامنام اسم مستعار لعتصر قاثمة الجميح 446 
130 لثم عاز5 © 3 © © عنامنام عنوان إنترتت خارجي الجميع 44 
و م © 6 0 عانم اسم مستعار لعنصر قائمة الجميع 455 





لاه عار: كعو3م-ع1ام01قجاع) 


كما في الصورة أعلاه سنقوم الان بعمل عنصر في القائمة باسم (الأقسام) وسنضع عناصر فرعية لها وهي (قسم تصميم المواقع - قسم الجرافكس ‏ 
قسم الشبكات والصيانة ). كل قسم في القائمة هنا سيكون مرتبط بالقسم أو المجموعة الذي أنشأناها من أجله والتي تشابهه بالاسم. والخطوات الاولى 
كالتالي: 


نقوم بفتح العنصر (وع516 ©521121). 


تغيير نوع القائمة إلى (عنوان إنترنت خارجي) وهذا النوع يتيح لنا وضع رابط معين ولكن الغرض لدينا هنا تركه فارغا بدون رابط لأننا نريد أن يكود 
المحتوى صمن العناصر المندرجة صمن العنصر(اقسام). 


حفظ وإغلاق. 


سنقوم بفتح العنصر (51665 5312716) وسيكون الشكل بعد التعديل كما في الصورة: 


توح عنصر القائمة * عنوان إنترنت خارجي لحي 
اسم القائمة * الأقسام 

الر أبط 

مااحظات 


نقوم بعمل (حفظ واغلاق). ننتقل للعنصر (1221129) كما في الصورة. 


الفلترة: البحت | | إعادة التعييد نامعااا متدانا " | | - تحديد الحد الأقصى للمستويات - ” | | - اختيار الحالة - ” | | - اختيار مستوى الوصول - “ | | - اختير اللغة - __ ” 
الصفحة 
الاسح الحائة مم الترتيب ت مستوى الوصول توع عقصر القائمة 0 الئعة ركم التعريف 
الرئيسية 
ئيسية 1 ن لانم لمقالات » المقالات المميزة تومي 4 
عار: عو ومع0) 09 8 
خنماتنا 
| © 2 © © زأطنم المقالات » مجموعة كلائحة الجليع 204 
: لا 5-]نا0) 
1ض عق الكت تر هدا 
حول رواد التكنولوجِدٍ © 3 © 66 عانم المقالات » مقال همقفرد الجميع 233 
(الاسم الستعار: وأم-راعع]-آنامطق) 
ىق © 4 © ©6 عنامانم عنوان إنترتت خارجي الجشدح 238 
3115 206 
2115م ' © 1 و عانم اسم مستعار لعتصن قائمة الجميع 445 
) ملروقم) 
50 لعتنصر قائمة 
١‏ ماع © 2 6 عاطم أسم ستعار لعتصر قائمة الجميع 446 
ع إل مملاة) 
0ه أماملم عازه ث 5 9 6 5-2 طون رات خاريجي م 3-5 
5 عام01ةع 0 
9 م © 6 6 عانم آأسم ستعار لعتصر قائمة الجميع 455 





) 5ع0قمعا مهقتاع ) 


0 00967 :ع اا8 ١/0‏ 
علركااة روعت 1ت اسليا للعيية 2 /00967 :2 اا ١/08‏ 


ع .0 م لاععغ]. ننانانا نالا 











ل 
بعد فتح العنصر (221129) نقوم بالتالي: 

تغيير النوع إلى (مجموعة كلائحة). 

تغيير الاسم الى (قسم تصاميم المواقع). 

تغيير الاسم المستعار. 

اختيار المجموعة أو القسم (تصميم المواقع الالكترونية). 


بعد تنفيذ الخطوات السابقة ستكون كما في الصورة: 


> الإحدادات المطلوية 
نوع عنصر القائمة * أمجهوعة كلالحة تحديد 
اختيار المجموعة * تصميم المواقع الإلكترونية ” 
اسم القائمة * سم تصميم المواقع 
الاسم المستعار موأقء لمعن 


وسيكون شكل العنصر في الموقع بعد (حفظ وإغلاق) كما في الصورة: 


حول رواد التكتولوجيا الأقسام 0110م ع5 د5ع230 عام301»] 





قم تصميم المواقع 


م50 


2هءع6م5 


وبعد الضغط على الزر سيكون شكلها كما في الصورة: 


الرئيسية -- حول رواد التكتولوجيا الأقسام 1110م عازه 2305 عامدموعاآ 





تصميم مواقع رسمية كتب بواسطة: ]58لا ]عملا 0 


ننتقل للعنصر (510[7) وبنفس الخطوات السابقة نقوم بتغيير اسمه إلى (قسم الجرافكس) وربطه بالمجموعة أو القسم (تصميم جرافكس) وستكون 
الاعدادات كما في الصورة: 


التفاصيل 


> الإعدادات المطلوية 
اختيار المجموعة * تصهيم جرافكس في 
آسع القائنمة * أقسحم الجراقكس 
الاسم المستعار امهو 
4 خيارات المجموحة 
8 2 


بعد (الحفظ والإغلاق) سيكون شكل العنصر في القائمة كما في الصورة: 


١/08 ||: 00967 0 0‏ 
لالتحا أ0.0أم داعع0©1م1 :اأهموع ‏ 772755202 2:00967 || ١/608‏ 





1 


الرئيسية خدماتنا حول رواد التكتولوجِيا الأقسام كع ا تك د5ع230 عامدم »اع 





2ء(ع6م5ك 


وبعد الضغط عليه سيكون كما في الصورة: 


لأرئيسية خدماتتا 00 الأقسام ملم عارك 5ع230 عام2»301 





2ء(عهمك 





كنك (مطشلنى صاثت كتب بواسطة: ]58لا ]عملا5 0 


نأتي لإضافة قسم جديد وهو (قسم الشبكات والصيانة) ويكون مندرجة تحت عنصر الأقسام ايضا ولكي نقوم بعمل هذا القيم نقوم بالتالي: 
من لوحة التحكم (القائمة - 1261211 7193112 - إضافة عنصر قائمة جديد). 

اختيار النوع للقائمة (مجموعة كلائحة). 

وضع اسم القسم (قسم الشبكات والصيانة). 

وضع اسم مستعار. 

من الاعدادات نحدد العنصر كفرع من الاقسام عن طريق خيار (العنصر الام) نختار (الأقسام). 


وسيكون شكل الاعدادات كما في الصورة: 





١/08 ||: 00967 0 0‏ 
الاكدا أ0.0أم داعع0©1م1 :اأهمع ‏ 772755202 2:00967 || ١/08‏ 


0 | مدير القوانم: عنصر قائمة جديد 


التقاصيل: 

توح عتصصر القائمة * جفوعة كاتلحة 

اسم اتاثمة * الج ص ووو وو 
الاسم المستعار 

ملاحظطات 
الر ابد 0 وعذهه حبنت أبنية ام عذرعت_دمممحمه نتمم ملام مهما 
الحالة 

مستوى الوصبول 
مكان القائمة * 
الحتصير اللأم 
الترتيبه 

طر كه في اد 
الصقحة الافتراضصية 
اللغة - ممه ار اليم عذاة 

0 - لاسا قم لاحت 0-7 


رقم التعريقف 0 





الاحدادات المطلوية 
أختبار المجموحة 2 





خيارات المجمو هه 
لاآتحة التتسميمات 
إحذادات المفال 

خيارات الدمتم 

خيارات توع الرايط 
خيارات عرض الصفحه 


خيارات الكلمات المقتاحية 


تخصيص موديول لعتصر القاتمة هذا 


وبحد (الحفظ والإغلاق) سيكون شكل الموقع كما في الصورة : 


لأقسام 0110م عارك 5ع230 عام2<»300 


سيتاح الترتيب يعد حقطظ حتصر القائمة 





دءأعهم5ك 


سنقوم الان بالعودة الى عناصر القائمة الرئيسية وكما في الصورة: 


أع 6.10 1ج حاعع]. /الالانا ثانا تلك ةكت 61و [إطووة 


0 /00967 :ع ااا 


2 /0096 :2 ع اا8 ا 











القوائح عقاصر القائمة 
الفلترة: البحت إعادة التعييز نامع اناا متدانا ”" | | - تحديد الحد الأقصى للمستويات - _ ” | | - اختيار الحالة - ” | | - اختيار مستوى الوصول - * الت افنة._ * 
لا الاسم الحاله )1 الترتيب ث مستوى الوصو[ توع عقصر القانمة الرئيسة اللغة رقم التعريف 
55 الرئيسية 
5 رن ١‏ © 1 و عاطنم المقالات » المقالات المميزة 00 الجميع 435 
(الاسم المستحار: ع وه مع100) 
5ك خدماتتنا 
ل © 2 09 6 عانم المقالات »م مجموعة كلائحة الجميع 204 
(الاسم المستحار: للاع5-]ناهم) 
,ٍْ ل رواد التكد ١‏ 
ب حول رو لتكنولوجيا © 3 © 6 عانم المقالات » مقال هفرد الجميع 2353 
(الآسم الستحار: وأم-راععغ-آناه60ة) 
2 الأقام ن 4 © © عناطنام عنوان إتترتت خارجي الجميح 238 
00 قم تصميم المواقع ة كلائحة 
6 تصميم المو غِ زي) 4 0 عزانم المقالات » مجموعة كلائحة الجميع 445 
(الاسم الستحار: موأ5ع لاع /نا) 
5 قسم الجرافكس ة كلائحة 
6 الجر © 2 © 6 عانم المقالات » همجموعة كلائحة الجميع 446 
(الاسم الستحار: يع 11ام9013) 
1 قم التبكات والصيانة كلائحة 
5 ا © 3 0 عانم المقالات » مجموعة كلائحة الجميع 469 
(الآسم المستحار: 084-7731014) 
65 05ئهمادامتصمقم مازك © 5 0 6 عامانام عنوان إنترتت خارجي ا#ينيع د 
0 255 عاملم - 
6 و2 عامةيط م 6 35 عتاطنام اسم مستعار لعنصر قائمة ب 455 








(الاسم الستعار: 5ع 80م-ع1م801)»اع) 


كما نلاحظ في الصورة أعلاه سنقوم الان بعمل عنصر جديد وسيكون (أخبار رواد التكنولوجيا) وقبل البدء بعمل العنصر نقوم بالذهاب لمدير المجموعات 
وعمل مجموعة جديد (قسم) خاص بالأخبار نسميها ونقوم بحفظها ونعود لعناصر القائمة وننشئ العنصر بنفس الالية السابقة وسيكون من النوع 
(مجموعة كلائحة) وستكون الاعدادات كما في الصورة: 


التفاصيل - 
*» الإحدادات المطلويه 
8 اختيار المجموعة * أخبار رواد التكنولوجيا ا 
اسم القائمة * أخبار رواد التكنولوجيا 
الاسم المستعار اع م 
لاحهذاء” 1 حورت المجموحة 
- 
4 لاتحة التصميمات 
الرابط 06 وع ذه باك انق 1 601120_توممععتمه أأمه2 ملام .عاء 150 
4 إعدادات المقال 
الحالة هتنشور يا 


وسيكون شكل العنصر في الموقع كما في الصورة: 


الرئيسية لت ين ررد ل 2 الأقسام 0 دع230 عامدمج»اآ 





2هءع6م5 


نعود لعناصر القائمة لإنشاء آخر عنصر وهو اتصل بنا بدلا عن (2286©5 12321016) وتغيير النوع إلى (مقال مفرد) ونختار من مجموعة او قسم 
(عام) المقالة التي انشأناها وهي (اتصل بنا). وستكون الاعدادات كما في الصورة: 


التفاصيل - 

> الإعدادات المطلويه 
نوع عنصر القائمة * إمقال مقرد تحديد 

اختيار مقال * اتصل نا اخدرا و يتخييق 

آسم القائمة * اتصل ينا 
الاسم المستعار ع نياعت 

4 إععدادات المقالات 
مااحظات 

4 خيارات توع الرايط 
الرابط عا امه داك أ/ن012048هه_لمممحمه أ امه ولام عرع لما 

4 خيارات عرض الصقحة 
الحالة هنشور ا 


: 0 00967 :ع اا8 0لا 
ع .0 م طاععغ]. ثانالا نالا 





اتلوافا» لوكت 1ت علو للصيية 2 2:00967 اناا 


وسيكون شكل القائمة النهائي في الموقع كما في الصورة: 


خنماتتا ال الأقسام نسار روالد الف و كا لتصل يتا 





2ء(ع6م55 


وعند الضغط على (اتصل بنا) تظهر المقالة التالية: 


الرئيسية ‏ خدماتنا ١‏ حول رواد التكتولوجيا ١‏ الأقصام ‏ أتخيار رواد التكتولوجيا اتصبل يتا 





2ء(عمهمك 


اتصل بنا 


تاريخ النتشر كتب بواسطة: 51لا ]ع0منا5ة 8 المجموعة: عام 9غ] الزيارات: 0 بك ه 


رواد التكنولوجيا م 
سق عرز رع رع رمز مر 9 


رواد التكنولوجيا تشارع حده 
تلقون : 00967772755202 
تلقاكس : 00967772755202 
البريد الإلكتروتي : 00[/3/0060117)آنا5لالا_(اع 
جوال + واتساب : 00967772755202 


أو عبرصفحاتتا الاجتماعية 


1111 0 00967 :|08 ا/ا 
امه أع0.0أمحاعع60©1]م1 :اتهومصع ‏ 772755202 2:00967 5 1ا8 ١/0‏ 





يمكننا اضافة وتعديل ما نريد على القالب الخاص بنظامنا الذي يعمل على جوملا وذلك عن طريق إعدادات القالب أو ملفات ال55) ولكي نقوم بعملية 
تغيير الشعار نقوم أولا بايجاد الشعار والمقفاس الذي نريده. 


خطوات تركيب شعار للموقع : 
تصميم شعل بأي مقاس وسيكون المقاس الخاص بموقعنا الطول(4؛ )١١‏ بكسل العرض ٠٠(‏ :) بكسل. وسيكون نوع الصورة (22102) خلفية شفافة. 


نقوم بتسمية الصورة إلى (ع1080.01) ونقوم بنقلها إلى المجلدات الموجودة في المسار التالي: من داخل المجلد الخاص بالموقع نختار 
المجلد(وع)12مدمءع)) ثم المجلد (51222761:_576©01412) وهو اسم القالب ثم المجلد (1212286©5) ثم المجلد (509165) ثم ننسخ الشعار الى داخل المجلدات 
(591»1 - 59162 - 69163و .. إلى 509168). بعد نسخ الصورة (الشعار) نقوم بمعاينة الموقع وتحديثه واذا لم تظهر الصورة نستمر في التحديث أو 
عمل (اعادة تحميل لصفحة الموقع - 1:2102)01). وسيكون شكل الموقع مع الشعار كما في الصورة: 





هال الرواد لتكنولوج 


011100 
20001 3ق 








ا 


من لخدتمات الراقية والجميلة الت تقنمها تصاميم لجميع وسائل الدحاية والاعمن فريق 








لفاصبيل أذ 





تم تركيب الشعار ويبقى تعديل العرض الخاص به وذلك من (لوحة التحكم) ثم (مدير القوالب) ثم اسم اقالب (17©142110 - 66©11:8م5_:اعم582) كما في 





. ١ 
لصورة:‎ 
4 < 1 3 ام‎ 
96 مدير القوالب: الأنماط 0 : 7 | َه‎ )< 
نسم بسي تسم الاقتراضي تعديل تسخة طبق الأصل حذف الخيارات المساعدة‎ 
” - الفلتر البحث ها لتعيين أخنيار القالب و1 اختيار العمكان‎ 
لاتماط المكان القالب ات لاغتراضى معين كد التعريف‎ 
3 © كه #الزنوتوم -عنمومنم الموقع مام‎ 
6 © نهعم - كدمم8 الموقع 25عع5‎ [7 
114 © الآ ئزع يزروم  2جمهق الموقع 0_جعع8‎ 
4 © انعم - 2تموع الموقع 0 جعع8‎ [717 
2 ١ #اازنوتوم -عروئدونرع المذير >011غأ5عنا8‎ 
5 نمقوم-ءوطوب المذير امه‎ [17# 6 
115 8 اللمن؟ إفاع)» د تسن أمزوكت الموقع 53 اعم513‎ 18 5 





عدد أمطر اللائحة: | 20 قي 





00 0 00967 :ع اا8 0لا 
: 1 اتوك 11611 المسفوة 0 0 0 100000 





بعد الضغط على اسم القالب سيتم فتح صفحة الاعدادات الخاصة به كما في الصورة: 


بمرزأه لز #/ بره فووسوم . 
ا رو 7 ع1قلمنا 8 ماعنا 7ع لععمو لهم 011ع55107ش بامعاا 2م 15رمع 8# دصعاة |[ل] | 17د 





33 6م513 0 لا 0 
201151130217[ ملا الالال لإا ع1وامدمع ١‏ 2.5 001113ل. عو سي الاضاضفا 
31 000 ا وزع طعع 1 
06 طا لاا موه ا 2 
ع 300 5ع 31املمع1 000113ل اانالعع ,هم 300 لوناترمععط. 255717 ص 
001115113011[ 0 رالا للا لاطا أطواع ٠0006‏ 130 


من الصورة اعلاه ومن اليسار قمنا بتغيير العرض ٠١0(‏ ؛) بكسل فقط. نقوم بمعاينة الموقع وسنرى الشعار في كما في الصورة: 





هللا الرواد لتكنولوجيا المعلومات 


101 


1 5ع ع 2101 0037 انلايع‎ ١-0 





ا رك 


لقوم رواد التكتولوجيا يتصميم المواقع الالكتروتية الرسمية ياتواحها 07 دس اك 00 








١/0811: 00967 0 1111‏ 
الا كسا أع .10م داعع10]0©1 :اتلهمصع ‏ 772755202 2:00967 ع ||8 ١/0‏ 


التعديل فى ملفات القالب (ملفات ال055) 
يمكننا التعديل على ملفات ال095) الخاصة بالموقع ولأن القوالب الخاصة بجوملا في أغلبنا تكون مليئة بملفات ال155) وايضا لان الأكود تكون بالألاف 
فلابد من وسيلة للوصول للكود الذي نريد القيام بتعديله. 


وإضافة لخبرتنا ومعرفتنا بلغة ال055) سنحتاج بعض الادوات والبرامج التي ستساعدنا في عملية التعديل وهي كالتالي: 
برنامج الدريم ويفر. 
متصفح موزيلا فايرفوكس أو جوجل كروم. 


أداة (وداطاء:151). ويتم تزيلها من الرابط. 


تعديل حجم عناوين القائمة 


سنقوم هنا بالتعديل على ملفات ال095) الخاصة بالقالب الخاص بالموقع الالكتروني وسنقوم بفتح المتصفح (موزيلا فايرفوكس) والمركب عليه اداة 
ال(عناطء1”1) والموقع الخاص بنا. 


نلاحظ في الصورة التالية أيقونة الأداة على اليمين والتي على صورة (حشرة): 





> عزو]ع]آ] 


عي 1 م4 4 -2 م ع!ومة0 - 8 ع 1 /25_ةامطمه [/ؤووطاوةعءن| 4 لج 


وللبدء بالعمل عليها نقوم بالضغط على الاداة في متصفح (فايرفوكس) وستظهر نافذة من أسفل الموقع كما في الصورة: 


نآك - ته جم 4 م عاومه - 8 ق ؟ جو /2.5_ذاحدمهل/غومطاةءه| 9م © 





اللا 





هدَأَلَاك الرواد لتكنولوجيا المعلومات 


ودم ومعع يرورم لاعس إملربرعع+ 








شبعات وصيانة حاسوب 


تصمم شيكات بأحدت التعنيات ويكل احثرافية وتقدم خدمات ا 0 





| © 


ح بك م لها 3 
ااا ل ل << > الى جو 
201/1 غنمبرها معغسمصمم) صصخم سمتصصا ست ا 
ِ (106 عهذا) 5كد5عء,ع131م468ش :عد دده 1ع <" 40 5201:3231 2 215 3ع2ع -1 21ج تعد / 10110 11 قتعا طعد “131 اوعد 0 - 73 - طاطاعاثر /ر : ورواعا " الأكاثر 201:31 21:52 3حد 1 0 1 22811211 10110 “رت 3 قار كر -" 2118116 املاظ 5اطلطا1001! > 
<” 34-3 1123 1-1123 513 و 3 1 2ع 5 2" >-301215 " 3ش -2 شق ”153216-7 2 311 " 2-533 شق "-13216 _ السغط» حا 
تطووط :<2قهم1ء <ةقدعطع ]ا 


" د-25عتضم 





انه سج امي علي فى ازع ع ءا اغا 
ل 4212-13-2 <لمتتاع طرع> 
2025-5126 

<82طوذدعط 

-285و1عط-ع112 

2221211227: + 


١/08١: 00967 0 0‏ 
لالتحا أ 0.0 1م داعع0©1م1 :اأهمع ‏ 772755202 2:00967 |8 ١/0‏ 
































* '* نضغط عليها ونؤشر على عناوين القائمة كما في 


ومن خلال الزر الموجود على رأس النافذة من اليسار والذي هو على شكل مؤشر فأرة 
الصورة: 








َلك الرواد لتكنولوجيا المعلومات 


ولنصس ودمعع يرورم /ا06 إملربرعع+ 





< 3 


تصمم شيكات باحدت التقتيات ويكل احترافية وتقدم خدمات الصياتة للحاسيات والشيعات... 





/2.5_داحممهل/غأومطاوعها 


-| 2< > ذاو 


الصغط > وطزمط > عاأردعاء ,نم ص مطل > مرقتقا-مك./لال > نامعحم-مك.انا > لعا -نامعصم .اا > تتلع8أ-لاعت.ق3 | 1ع | 4 








مر ععنامم 64عظ1 0014 #منت5 55 | 





. <"167:761-0 لالعصس-دةه "-5355 1 11> حا 


(26 عصنا) 55ع., نامصعدم تقلط وطة 1 
| 1-0ع:: 12‏ 1311 <"2312525 321776 2611 562141-31" -1355 11> حا 
5 ع 
262211-31 13 ]ات <"' ناطاع”" -5 35 1ه صدرده »> اا 
ق <5232 /> انرئيسية <"211-21816 1355-2 ةوه > 
-2211 22 5 
1 <2ة و5 ر»> 
, 22 1156112120776 0 
اط©ناد # 9 1 
167761-11 131 <13/> 
اه <"2121211-12211"-5 35 1 11> | 


من خلا الصورة أعلاه قمنا بالتأشير على عنوان القائمة (الرئيسية) بعد التأشير نقوم بعمل كليك. ومن النافذة الخاصة بالأداة على اليمين يظهر الكلاس 
او ال (10) الخاص بالعناوين للقائمة مع اسم ملف ال095) كما في الصورة. وعند التأشير على (17361113.055) الموجود على يمين النافذة يظهر الامتداد 
الخاص بالملف (مكان الملف بالضبط) كما في الصورة: 


” ١ 86 





0011/1 أسعبوها. لعانمصهم | »> عاب59 | لغلا امغط > وطءزمط + بطروعاء. امود 
> (33 عمنا) فقع, نامعدم تتقصعمظة ١|‏ 
١‏ ل-1 عمدت 1 _ 111 
كك , كلع را أبووع أرق عع درك_'اعم هحاء 'بكع ]3 | دردمع كت ف_هاحصهمه ل بتكم طاقعه| تملا 
1ه ّ 
و 


2521 1< لتقم _ كت 
1ه 1اطنرده 8 
1555211 111 

- 


من خلال الصورة أعلاه تعرفنا على المكان الذي بامكاننا التعديل من خلاله وهو في ملف 171161111.055 الموجود في المسار (مجلد الموقع 1111212165 
- 512971_526©11:8 - 055 ) نذهب لمكان الملف حسب المكان المشار له وسنجد الملف كما في الصورة: 


0 0 00967 :ع |08 
لقعلله . اة وكت زو “اإطفوة ا 0 00 1000 


























89> -2دق عام بعلا مانا - 

ع5 م1 0110 عغ03] . عممةل"ا 

علا عاع ‏ 75ئ5٠م 7١15/١5/17‏ عام إل 

عام عا 5 م6/17١/115١‏ كع اراك لل 

68 ...5 عا/هذ5 ومالوءدةه 2 م 15/١6/17‏ 1١؟‏ توى 2 
8 4 ...5 عا/58 ومالوعدقه  +٠75‏ م6/17١/15١١‏ مون 7" 
18 ...5 عانوذ وصالهء دوه 5 م ١15/١6/17‏ بزامه_7ع1 9" 
118 ...5 عاب58 ومنلوء دده ١75‏ م6/17١/15١٠‏ ام_رع1 9" 
218 خمقع5 مبزم 2 بوء. م6/17١/15١7‏ وى تووعه 1 ؟" 
118 ..ع29 اال[ بمععرع بخ م12/.6/17” عم [©ا 
8 14 ...5 عا/58 ومتلوعدقه ‏ 275+ م6/17١/15١١‏ قاصمهز ©" 
8 5 ...5 عاض5 ومنوهءدوع ‏ 55ئ8ء م0/17٠/15١٠‏ بصعم *" 
8 4 ...5 عا/وذ5 ودالوء5قه ١215‏ م ١١15/١6/7‏ كع انال ممم ©" 
8 4 ...5 عا/55 ودالدء د05 25 م6/17١/12١١‏ 7 
78 ...5 عاذ وصالوءكوه :17م ١150/١/15‏ عغواممع؟ ©" 
66 ...5 عانوذ ومالوءكوهه 5 م6/17١/15١١‏ اغ_عغواممع: ؛** 
868 ...5 عا/55 ومالوءدهقه م6/17١/12١١‏ امم روممة +" 


لدينا الكود التالي والذي سنضيفه لتحسين مظهر عناصر القائمة من حيث الحجم والخط على بعض الاسطر وتعديل ما يلزم وعدم تكرار خاصية معينة: 
51115 ,111115 ,''140111211 3639 و1121 1''' : التسسد1-ادمه] 

10111--:010 

10111--16:10:: 


كما في الصورة أعلاه نقوم بفتح الملف على دريم ويفر وننتقل للسطر 5" والاسطر التي بجانبها وكلها خاصة بالقائمة حسب المشار لنا من الاداة 
سيكون الملف كما في الصورة: 


5 


+:1لات 313 -211 12032 . 11 < 1221-0 . 111 كةمعمد”؟ة 
7 : 0123لاتس : نا : 1233-1 قن : 15121 : 21531 : 51 1ط : 337 521 5134003 2322011-15 . 13 < 152521-1 . 111 251 طناك 2 


4 يف نل 


كن اظثر آكر آكن اك آكخر آكثر لت 
أله 


5211:1522 102211-31 . 3 الات 1232211-31 . 11 < 1221-0 . 111 كةمعدمط”؟ة 

عاق 115-22 للامع طامط ؤزتاك ( 210 372 3عاصةق_تقصعقصط “ركع وهسة /, . . ) 1عدنا : مستامعوطح هط 272 :2122111-32 . 3 << 2131 2322211-23 . 13 < 152521-13 . 111 551 1 طناك 2 
:525211 ,1170125 , ""لتققتاه 1 117 117025" : 117 1نتتة 1205131-12 

1 0111-51 3111 1-2 

1201211--53 255 : 15232 

0007 : ماسح -01تنا ع2 وعاص قط ! 152 31 . 211 2122111-11 . 213 < 15521-1 . 111 551 1 طتاك 2 


0 ده 5-0 سي 


ذِنذ 


2 


شعن 20 


,1022111-11 . 3 5 621 2222211-31 . 13 < 1521-0 . 111 د معم”طة 

12122111-112114. 3 << 211 3322211-31 . 13 < 1251-31 . 111 21مدت 1لطناع 2 

55211 ,2117325 , "لتققشقتم 8 ساع11 13170325" : ئز ل قلاتة 1 11ت 12 

1-2 111 51 - 11ت 1 

15227 : 0033333 قج : نا : 33-33 قن م 212112 : 331-2313 دمت 2221-15 .2221171231 : 1317212-1153-3111 : ع1 15 : 521337 413 : 2212 4 : عدم 1ددع : م5 1 : 55 212-531م 2 


1 
أ 
د 


55 20 25 
1 يرك زه 030 


2 


,1022111-11 . 3 5 11ت 2211-3 1222. 13 < 1521-0 . 111 د ةقمعم”طة 

5331 212211-11 . 3 << 2331 232211-11 . 13 < 1521-1 . 1311 221 طناك 2 

55211 ,21173125 , "لتقشتم 8 ساع11 11325" : 7ة ل قلتة 1 11ت 1 

1 1115 51ج - 1-111 

129013112-51252 : 2 

:م5 1 : 3123 هتس : نا : 133132قنة : 21265112 : قات 1 عا قعمع 2522-3452 :50231 220 : 1ق 1172152-53 : عا5 1ط : 841551337 : 2121 2 : مامع 


ا 
ف ل اس 


ا 4 كك 
اخ 5 


كل 5 





وسيكون شكل القائمة بعد تعديل كود ال0595) كما في الصورة: 


: 0 00967 :ع اا8 0لا 
ع .0 م طاععغ]. ثانالا نالا 





اتاو »وات 00 6زوا الضيوة 2 /0096 :2 ع اا8 0لا 














الرئيسية كدماتنا حول رواد التكنولوجيا الأقسام أخبار رواد التكنولوجيا اتصل ينا 





هدَأَلَا الرواد لتكنولوجيا المعلومات 


ولج ومعع ررورم /اع0 إملربرعع+ 








-- 82 الال إلندةة م 8-6 الحاو 5 ا م "م اا" اك 502 سم 5110 كه 





وبهذا اصبح لدينا موقع كامل من نظام جوملا. وسيكون شكله النهائي كما في الصورة: 


١/0811: 00967 0 1111‏ 
الا كسا أع .10م داعع10]0©1 :اتلهمصع ‏ 772755202 2:00967 ع ||8 ١/0‏ 























صور مختارة 





في الجزء التالي لدينا بعض الاضافات الهامة للموقع والتي سنقوم بتركيبها. 





081١: 00967 0 11110‏ اا 
كسا أ0.0أم داءعع0©1م1 :اأهممع ‏ 772755202 2:00967 |8 0/ا 











"١ ٠ 


إضافات التواصل والمواقع الاجتماعية 

نحتاج في المواقع وسيلة توصل مباشرة من خلال الموقع البريد الالكتروني مباشرة. هناك ميزة في جوملا لعمل فورم جاهز للتوصل وهناك موديول 
جافزة يتم ترعيبة .على الظام الموقع. وماك وتعين. يريد الكتروتي.خاض في ,هذا الموديول ويتم ارال الزفالة الشخصن. المتصفع الى .هذا البرية 
الالكتروني. 


تركيب موديول (11112201212]_[25)_م2100_52) 


سنقوم بتركيب الموديول الخاص بالتواصل على الموقع وسيكون في صفحة اتصل بنا على يسارها ومن لوحة التحكم (مدير الاضافات) ثم رفع وتنصيب 
الموديول على الموقع بنفس الطريقة التي تعلمناها وبعد التركيب من لوحة التحكم (مدير الموديولات) وسيظهر كما في الصورة: 





الفلترة: البحث إعادة التعيين الموقع || | - اختبار الحالة - [ب] | - اختيار الموضع - ]| - اختبار النوع - |] | - اختيار ستوى الوصول - | | - اخبار اللغة - [>د| 
لك الاسم الحاله الموضع اث الترتيب التوع الصفحات مستوى الوصول اللغه رقم التعريف 
5 1عانكهانا معن اك /اامناا 60 لاشيء (تفعيل فوري) 0 كع انلها عع نات //ا0 نالا لاشيء (تفعيل فوري) عاامانام لجيه 51 
20113 عاء نا م56 60 :: لاشيء (تفعيل فوري) :: 0 201113 لانن م5 لاشيء (تفعيل فوري) عزانم اليه 94 


نقوم بفتح الموديول (001621) 0111© 91) وسيكون شكل الاعدادات كما في الصورة: 


2 ارسل رسالة 

إظهار العنوان *ا إظهار إخقاء 

الموضع ا تحديد الموضع 

الحالة منشور ؟ 

مستوى الوصبول عأاطنه ١‏ 

سدم 1. ارسل رسذ_ 5 

بداية النشر 0000-00-0 00:00:00 | 2 

تاريخ انتهاء النشر 0000-00-0 00:00:00 | 2 

اللغة الجميع إئا 

رقم التعريف 94 أ03 عاءآنيو م5 الموشع 
وصف الموديول 13 101 100101! أ20012) عل1نا 22350 عندزقة - أع20012) عاع1ن0 52! 


من خلال الصورة أعلاه قمنا بعمل الاسم المناسب للموديول ثم حددنا إظهار للعنوان ثم تحديد الموضع إلى (114ع21) ثم الحالة (منشور). 


الصورة التالية من الاعدادات: 


تير القاتمة 
تعيين المونيول على الصفحات لمحندة فقط ١‏ 
قائمة الاختيار: تبديل التحدي الغاء التحدي تحديد الكل 
013 أناوطايث لوط لؤوزاةأدنائ م50 انم نامع انا ملقانا م10 نامع انا ,عونلا 
تيديل التحدي الغاء التحدي تحديد الكل 
- الر 5 ية 
- خنماتتا 
- حول رواد التكنولوجيا 
الأقسام 
قد د الحسابية المواقّم 
قم الج رافقس 


- - قسم التبكات والصميانة 
؟ى ١‏ ا 1 ١‏ 
- آخبار رواد التكنولوجيا 


بي) - انه ل بنا 


ا 5 0 00967 :ع اا8 ١/0‏ 
1ت '. أع .0 أم حاعع]1 ©1100 2 /0096 :2 ع اا8 0لا 





دين 
قمنا بتحديد (على الصفحات المحددة فقط) ثم من (نادرءع81 1تد81) اخترنا العخصر اتصل بنا. 


بقية الاعدادات: 


> الحيار ات الأساسية 
الققاط اأتكاقم اممه.مماد 8 لكر مع 


5 5 ((580003 1101168 أت ارسال الرسالة ينجاع..شكرا لتوصلك 














مع القع القتتق رع ظ عع ناو لا 














اقفاك مشكلة..لم نتم الارسال الرداء اعانة المداولة | 


4د خيارات متقدمة 


من الاعدادات على الجهة اليسرى للموديول. 10921211 11ل 4 وتعني البريد الالكتروني لمدير الموقع والذي ستصل اليه رسائل الزوار او المرسلين. 
الحقل التالي لتعيين رسالة نجاح الارسال وهي كتابة جملة تبلغ المرسل بإتمام عملية الارسال بنجاح. الرسالة التي تليها رسالة بفشل عملية الارسال 
عند حدوث خطأ ما. (ملاحظة: الموديول يعمل فقط على سرفر حقيقي). 


سيكون شكل المودويل في صفحة اتصل بنا كما في الصورة: 


الرئيسية خدماتنا حول رواد التكنولوجيا الأقسام أخبار رواد التكنولوجيا اتصل ينا 








الرواد لتكنولوجيا المعلومات 


عع اناه /1 )0 ان لالنايط | 


/لا 12 





اتصل بنا ار سل 0 سالة 
تاريخ النتشر كتب بواسطة: 0581| 5100681 2 المجموعة: عام #9 الزيارات: 12 داع 
حور عاك 
رواد التكلولوجيا م اقمع ... 
سق “رز رع رعرار| -«0ر] 9 أععزطنا5... 
68 5 ا 


رواد التكنولوجيا شارع حذه 
تلقورن : 00967772755202 
تلقاكس : 00967772755202 
البريد الإلكتروني : 00[/3/00-60117)آنا5لالا_١اع‏ ععفد5ع اا رماللاعة 
جوال + واتساب : 00967772755202 


لاحظ تم تركيب الموديول بنجاح وتبقى فقط تعريب الموديول وسنتعلم في بعد كيفية تعريب المودويلات. 


0 0 00967 :عا اا8 0لا 
اكد 1 العيدة 





2 2:00967 اناا 





































































































ربط الموقع بصفحات التواصل 


تركيب موديول ع12200_57_12©©12001: 


سا 


يعتبر من الموديولات المميزة في والتي نقوم باستخدامها في ربط المواقع الالكترونية بصفحة التوصل الاجتماعي الفيس بوك ومن خلال الموديول نضع 
رابط الصفحة الخاصة بنا وبعض الاعدادات التي نريد كيفية ظهورها. 


نقوم برفع وتنصيب الموديول على الموقع الخاص بنا وذلك من لوحة التحكم ثم مدير الاضافات وبعد ذلك رفع وتنصيب للملف. بعد التنصيب نذهب لمدير 


الموديولات وسنلاحظه كما في الصورة: 


الاسد 


101 ,ع0 ااانا 


560 2850016 





5ع نأكف لع/ااراعم 


الحاله الموضع .ث الترنيب التوع 

60 شيع (تقعيا يي 0 الحزلات» »احلا لفان 
60 لاشيء (تفعيل فوري) 0 “أممماعءوع م5 

© شىء (تفعيل فوري) 1 أرشيف المقالات 


كما نلاحظ أعلاه الموديول (120670012 51) نقوم بفتحه وستكون الاعدادات الخاصة به كما في الصورة: 


التفاصيل 


د المت و 
إظهار العنوان 


0 08 
موسصمع 


الحالة 


لكن على تواصل 


210011 

منشور ؟ 

عذأاطن8 

1. كن على تواصز ‏ ” 
0000-00-0 00:00:00 
0000-00-0 00:00:00 


الجميع 7 


وت 


ىآ اده 
محداي الف وضع 


95 )أممراوءعقج] مرو ارمع 


1 .00111511301ل لط 001112[ 101 ع101ل10] )اموطعءع 12 00 10 الث - >»إاموراعنج] مم5 


الصقحات مستوى الوصول اللغه اسم يدا 
لاشيء (تفعيل فوري) عزانم الجيع 51 
لاشيء (تفعيل فوري) عاامنام ليع 95 

المحدد فقط نانم الجميع 27 


كما في الصورة أعلاه للإعدادات التي على يمين الموديول قمنا بعمل ه خطوات (تعيين الاسم - تعيين إظهار - تعيين الموضع واخترنا 7014601121 - 
تعيين الحالة منشور - تعيين القائمة واخترنا : على كافة الصفحات). 


ع .0 م طاععغ]. ثانالا نالا 


وت لضسووة 


0 00967 :ع اا8 ١/0‏ 
2 2:00967 اناا 








القيارات الأساسية 
5 لأمن) لععط باااتاعم 


15 أأررن) مأداع1111لاه )ا 


طقف | | طقف | | طقف | ١‏ طقف 


5 أامن) عاأمرعموع 
5ه أغأمن) عزمظ عاذ ا 


اللا عوة2 عاممزمموع وأتاطعع !تاماعد 

انأل اناا 2010 

لاست 55 

ملاع لاعة روامنا تطونا * 

]اناا »ا نإ" م1 
مم8 اك نلامااة يا وإ" 1 
8307 اماك ا ولخ 1 
]م8 اماك فا ولخ 1765 


4 15اصتلأمن) تإامنايا8 عاذ | 
4 5ه تأغأمن) كلاه قرع دورمعع همه 
4 015 (أرن) ااصااباظ لررعذ 


4 خيارات متقدمكه 


من الجانب الآخر للإعدادات أعلاه نختار (1105م2©0 :130 ع1,112) والاعدادات كالتالي: 

(111:1 عع29 ]01و0طاءع1"32) : نضع رابط الصفحة الخاصة بنا في هذا المكان. 

(11ع11»1 - 11101) : الطول والعرض. 

(©51:»12 010)): نتركه كما هو ويعني اللون بالنسبة للنص والخلفية ولديك إما مضيئ (110ع1.1) أو الخيار الاخر ومنها مظلم (1(21:12). 
(192©5 5120387) : عرض الصور الشخصية للمعجبين او المتابعين للصفحة. 

(2نوء:541 512038) : عرض المشاركات التي وضعتها الصفحة. 

1262061 51037) : عرض راس الصندوق الخاص بالأعجاب. 

(:1301:0161 512038): عرض حواف للصندوق. 


وسيكون شكل الموديول في الموقع بعد الحفظ والاغلاق كما في الصورة: 





10 0 00967 :ع اا 08 /ا 
لالتحا تاواف ا لكت 010ل الإعيية 2 /00967 :2 ع اا8 ١/0‏ 


ا 


وكما نلاحظ ظهور الصفحة الخاصة برواد التكنولوجيا وبدون عرض لصور المتابعين ولدينا في الموديول الكثير من الخصائص ويمكنك تجربتها 
وملاحظة النتيجة. 


تركيب الإضافة المساعدة (©:4_50©12[15121]_ع1م) 


تعمل هذه الأداة على ربط جميع المقالات الخاصة بالموقع مع صفحات التواصل الاجتماعي مثل : فيس بوك - تويتر - جوجل بلاس وغيرها ويمكننا 
اضافتها أو تركيبها من مدير الإضافات وتصيبها ورفعها على الموقع صورة للأداة في بعض المواقع: 


لزت 0[ م 1 


8+0 مشاركة عدن ينا #ا غَرد ١|‏ 0 


50016ع226 01 051م ووام |“ 


(0350)) عع03ل-اث ألا5نالا 35 00لأومم 








كما نلاحظ في الصورة السابقة لاحد المواقع التي تستخدم الاضافة المساعدة التي سنقوم بتركيبها الان. بعد ان نقوم بالرفع والتنصيب من لوحة التحكم 
من القائمة (الإضافات) ثم (مدير التطبيقات المساعدة) وسيتم فتح الصفحة التالية: 


القلترة: البحت | | إعادة التعيين ختيار الحالة  -‏ ” اختيار التوع “" | | - اختيار هستوى الوصول - 1 
اسم التطبيق المساعد الحائة الترتيب التوع اث تقصر قو رقم التعريف 

المصادقة - جوماة © 0 110 اناق 2013 عزانم 401 
مصادقة - |زج|/1 0 60 1 اناق 0111301 عزامطناظط 400 
توتيق - طلثر0] | 60 110 1أأناة مول عزانم 402 
التحقق - 96)23011(3] 60 0 عمق قاع أموعع] عزانم 439 
0 0 601111 15131 5021_أا0 ع انام 1019 
المحتوى - تحميل الموديولات © 0 0011 عانال 03010 ع انام 406 


وكما نلاحظ أسم الاضافة (ع:51121 50121 183:1 - 116ع200124) وامامها العلامة الحمراء والتي بحاجة الى تفعيل ولكن بعد عمل الاعدادات اللازمة. نقوم 


بفتحها وستكون الاعدادات كما في الصورة: 


التفاصيل 
الحالة مفكل * 521 لقاع50 ا8 - ااعامم) 280580016 حم 
مستوى الوصول أاطنه ؟ 

2 -_ 8ع الال ١‏ 
الترتيب 0. المحتوى - تحميل الموديولات ؟ 


601111 


0008 و ٠:‏ 
نه © التطليدة . ١‏ 5 
لوت التصييق اله حذ 


ملف التطبيقات الساعدة 55131 


لااناعكالالا جح 


١ 000061 دللاط‎ 


رقم التعريف 10019 

ألو صف 

5 عا8 ناكد جح 
5 (0اكجع/ا ااإعناام عهم نم5 اذاع50 817 --- 


عط ققء وتأوسا8 .ك5عاء1):ة والحممل عناملا مغوا ىل متتطعا! أهاء50 موزهم الج 2005 وأويام عهطذ لوأعه5 آا8 


5 لأون!2 .عاء 3:1 أه لمامط عن مما بأوامكال كضقتامه 2 لأأننا بأمعاممء وأ كمملغأوع0! 5نا10 هنا أج لعا5أاطنام 2-5 54 
ع|؟ونتلاع0 لداعمة طعوع عاطهؤال/عاطهوع ودع ناملا .)أ ع115مأكناء لقع نامل عععذاآنثا 5ن 0تكاع5 لمععاعجط الطسيينب 
عالأأععم5 عه 5عاء3:)1 [دنالأ/ا لها ركع 0011ع21ء ,كلامتاعع5 أ أأأععمك ره لعا علأطا عه بيتتمطى عه بإالدنلأناألدا - 


00 افلتلفاع اغاع قل قوع 1 لذلا 


<:2 مرطاحر 


خصضع ع ههه ' ) -2 28111 وحيرسة : : عم مع11 192 1ظل ' ) : 
1-5 1قةعهه : :ععقطء51ةعهه_عأقأامعمم0و1م - عمعطه () : 


تع ع تدومع8 /ر/ 
عهغ22تاط لقوعهة5 
قط ع«حمتعسعقصع سمدمعع8 // :1 


+تمط عأحععهدهكه عاممطععءهع // 


.0 م لاععغ]. ثانالا نالا 


: [ ' #صةعهعه ' ] ععمعطهدة مطءء» 


// : [ ' عصمغغتط ' ] ععقعطهء5ة مطعءع» 


' كح جدمع»ع2 ' ] عععطء 5 مطاعءع» 


: [ "خسعهدمع ' ] ععمعطهءة مطعءع» 


11١12 ١5 


!01 باع عالمقنانام > 


اع 1ع ام امغأنا8 


اماع ام اأراع تزه ) 


101 لاأوناام معاطووع: 


05110 أورعأره2) 13نلرم0ل 


1ه 2 


130 نه عمش 


1 ! 4أضع177ناءع00] ع5لا 


عاعنث عاوراه 
عاق اماع86 


عاع 1ق عناممائش 


٠ 


0 00967 :ع اا ١/08‏ 
2 /00967 :2 ع اا8 ١/0‏ 





التو 11611 الصسفوة 


ن نا 


تم تعيين (مفعل) على الاضافة في يمين الاعدادات وتم الانتقال الى )'١01771102(‏ 41(55477100:191(9) وتم تعيين الخيار (©41011 »©1ع51) في 
:101 تعمسام 0ع[طمدك. تعيين (©1ع1)»رج 15610) في درو1)زو20 )داء)م00) و[1دمرون[ فقط وترك بقية الاعدادات كما هي. 


نقوم بفتح أي مقالة لدينا في الموقع وسنرى الاضافة في نهاية الصفحة كما في الصورة: 


تصميم مواقع رسمية 


مجموحة: تصهيم المواقع الإلكتروتية ©8] الزيارات: | تك >»- 


تصاميم مواقص الكترونية 





تقوم رواد التكنولوجيا يتصميم المواقع الرسمية لجميع الجهات ويمختلف توجياتها الصحية والحكومية والسياحية والتجارية وغيرها 


حك ا و 522 2ج كم 


1111 3 00م 2 


(عوموطع) ععمرول-ام )ناذالا 35 وملادمم 268001 00 051م هولق (2 


تعريب الموديولات 

يتطلب منا أحيانا تعريب المودويلات أو المكونات الاساسية ليكون الموقع باللغة العربية ولأن جوملا نظام متكامل ومن خلاله يمكننا تعديل أي كود كذلك 
اللغة العربية لها مجلد وملفات خاصة بها وكل موديول او مكون له ملفاته الخاصة به بالنسبة للغة العربية وكمثال على تعريب أحد الموديولات سنقوم 
بتعريب الموديول الخاص بالتواصل (25ز_22200_57_)11121001424) وذلك بالوصول لملف اللغة الخاصة به والخطوات كالتالي: 


من داخل مجلد الموقع يمكننا الوصول لملف اللغة من خلال فتح المجلد (ع6ع0128ع132) ثم المجلد (7-0213©) وسيظهر لنا ملفات كثيرة ومنها ملف 
الموديول الذي نريد تعديله وسيكون اسمه (217.1100_57_)011101201262©1)-6122) كما في الصورة: 


© لذ > 2ق عل ام؟ معلا انا - 
ّ 52 م1 700112 ع03] 1 عصوول"ا 
118 ع1 1لا ”7انالء* ص 7١١2/١2/7١‏ 5عغ]_لع ذ3اع:_لمصم.8ما-وع 1 
118 عا 1ل 7١انالء+‏ ص + 7١12/١2/7‏ 85.5 ]]_لع3اع:_عمدم.68-وع ا 
38 عا 1ل11 7١ن+‏ ص ١١15/١2/7١‏ طاعروعد5_لعمحم.68-مع 1 
18 عا آلا 7١نل+‏ ص 7١15/١2/7١‏ كلك تاع(قع68.5700_5 دع 1 | 
68 4 عا 111 ااع١٠‏ م7 1/ره١٠/2١1١”؟‏ 2م5_معم_نحاه لاع ل 1اك_لمدم.68-وع |[ | 
118 عا 1لم 1‏ لطلنط١٠‏ م ظ١/ه١.‏ 1١1١م‏ غ3 مععاء أنان_مك5_ل0ه 68.7 -وع نن 
118 عا [آلذا1 ٠١‏ م 7ا/ره١‏ /11١؟‏ عطاناءناملاز_ءعامتصاك_مك_لمدم,.68-مع 1 ) 
8 2 عا 1لا 7انال+ ص + 7١12/١2/7‏ 5غأ3غ5_ل68.5000-مع 1 ) 
18 عا 1لا 7انلء* ص + 7١12/١1/7‏ 68.5700_5]315.5/5-وع 1 ) 
28 عا آلا ”7اتالء+ ص 7١١2/١2/7١‏ ]163ل الزك_عمدم.68-مع ا 


2 . 2203 2ط/مه»ه . 58 | تعلم البرمجة | 2دهن . 222202 ةط-22دمه1 . 7م 











2 


نقوم بفتحه ببرنامج الدريم ويفر كما في الصورة: 





أ 6# تس بكس 0ه نك هاه اعمال 





ف 


" 11هشظ طتسفظ” م1 ل ضاطاظ 111 آكانلتض 

1 2311نت عناضنة؟ عع عالت مووع 21"-ظنا ب+الشاطظ للك 
مسد د 

"” . . . 52311نظ" حا ل ملاس 


كر 5 32 وض 


"" . .ا . عا وطنا5 "7 -21) ا الظلاة 

"" . . . موه ص 1125" > اتاد 5 11 

"53327 1125 52111" ماماشد د ظلكظ_الااناطاة 

"...8311 عشجدع 1121-21 _1ل1قلا 

" !5221 2201 121-211 الالمالهة 

" . ع2 11اوع25 ع2 2121045 215511021234 811" - 11 _خ11ظ 
11هقتظ 821103 5 طععتدعه عدوع21"-ا1ل1ضلةا_ا 1 ضائاظ 
"112255 5211 110112" له 1 1!101_ذاد امامالاة 
551127 11هششقطع5 عت 1:1ت11"” -ظ11 18101 الالم لهم 


قم قم فم قم 
لزه هد ذى 1١‏ اد ا شخ 25 


كما في الصورة أعلاه نقوم بتغيير ما بين علامتي التنصيص كما في السطر ” سنكتب بدلا عن (...729206) التعريب والترجمة الخاصة بها وهي 
(الاسم..) وكذلك البقية بنفس الطريقة وسيكون الشكل بعد التعريب كما في الصورة: 





آم © بيج سمس 80 60 و" | معسايدت 


11 هنظ تلتسنفت” ‏ م1 1 ضاكاظ 1111آنات 

”.11 11قله نادم لطعنتطع 212358" -)دكالا _ل 1 شضلاظ 1111الات 
٠ . "‏ !الإسم " -1 لفاك 

"..الفريد الإلكتروتي"-.1211ظلظ 

".. الموضوع""- 1ماظلظلاد 

”..الرسالة" تاجافد 5 ظاط 

!إرصال الرسالة" _لطتا د85 _لاااظد 

"الوجاء الإتتظار"- 11 11شضلا 

"!..لم يتم الاإرصسال"--221ظ1 الالاللتط 

" !..جسشسيع الحقول مطلوية"- 1111_1155 11 

".الرجاء التأكد من صحة البريد الإلكترزوتي"-811]] .511611 اذاه 
511222557 1 1دهسقوطع5 115112" 1 1101_ذدد ظعانالاة 12 
523311207 11قشقطء5 عت1عات11” 110118 لاتلدلهضهم 1 





ف( 


لحن 2 412 بك 


آنه ذظد دم 9ل 


كما نلاحظ قمنا بتعريب النصوص التي تهمنا والتي تظهر للمتصفح للموقع وسيكون شكل الموقع في صفحة (اتصل بنا) كما في الصورة: 


الرئيسية خدماتنا حول رواد التكنولوجيا الأقسام أخبار رواد التكنولوجيا اتصل بنا 








ه الل الرواد لتكنولوجيا المعلومات 


ودتدير ومعع يرورم لاع6ماملربرعع 





انصل يذ . ارسل رسالة 


تاريخ النتشر كتب بواسطة: ]©5ل) 5100681 2 المجموعة: عام #9] الزيارات: 14 
الإسم.. 
رواد التكلولوجيا البريد الإلكتروتي.. 
ب سر رع رعراما -«0ر] 0 الموضوع.. 
الرسالة.. 
رواد التكنولوجيا شارع حدهد 
تلقون : 00967772755202 
تلقاكس : 00967772755202 2 
البريد الإلكترونتي : 1)0([/300-60177لا5لالا_(اع إرسال الرسالة 


جوال + واتساب : 0096/7772/755202 


أو عبرصقفحاتنا الاجتماعية 


2 . 2223 3ط/عده» . 558 | تعلم البرمجة | دهن . 2202203 ةط عد ده1 . جما 


كما نلاحظ تم تعريب الموديول على يمين الموقع كما في الصورة اعلاه وظهور جميع النصوص باللغة العربية. 


51 


يعتبر موديول البحث من أهم الموديولات في الموقع وسهل التركيب فمن لوحة التحكم ثم (مدير الموديولات) نبحث عن الموديول (56871) نقوم بفتح 


الموديول وعمل الاعدادات اللازمة كما في الصورة: 


للاسة * اليبحت 

إظهار العنوان إظهار خقا 

الموضنع اموع5 تحدي الموضع 
الحالة منشور ؤي 

مستوى الوصول عذاطنم ؟ 
الترتيب 1. البحث ‏ ” 

بداية النشر 0000-00-0 00:00:00 | 20 

تاريخ انتهاء النتر 0000-00-0 00:00:00 | 0 

اللخة الجميع آي 

ملاحظة 

ركم التعريف 35 اليحث 

وصف الموديول هذا الموديول يعرض مريع نص اليحث. 

تعيين القاتمة 

تعيين الموديول على كافة الصفحات 7 


* الخيارات الأساسية 


عبارة ضَِ ق الب - 


قياس عرض حقل البحت 20 

تنص مريع البحت ابحث هنا .. 
زر البحت 8 
موضع زر البحت يمين 
صورة زر البحت 2 

نص زر البحت البحث 


ككف تقنية البحت المفقتوح 


عنوان محرك الببحت المقتوج 


ضبط رقم تعريف المادة 


4 خيارات متقدمة 


كما في الصورة أعلاه وضعنا اسم الموديول حددنا (إظهار) وحددنا الموضع (طعتروء5) في تعيين القائمة حددنا (على كافة الصفحات) وفي الاعدادات 


على اليسار كما تلاحظ. وسيكون شكل موديول البحث في الموقع كما في الصورة: 





/لا 12 
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الرئيسية خدماتنا حول رواد التكنولوجيا 


الأقسام 


ف أل الرواد لتكنولوجيا المعلومات 


ذأاعع لاط 017 ان االايط 1 





00 
تعديبلات عامة 
بعد أن أتممنا عمل الموقع وقبل إطلاقه سيكون لدينا بعض التعديلات النهائية وهي : 
إضافة محرر جديد للموقع. 
وضع اسم مطور الموقع على الصفحة الرئيسية. 
إضافة المحرر (:1:11601 70017) 


المحرر هو أحد الإضافات الهامة والتي تتحكم بمحتوى الموقع ولدينا هنا أحد المحررات المميزة الذي يقوم بعمل محتوى مخصص حسب رغبة مدير 
الموقع من اضافة نصوص وتعديلها حجما ولونا وغير ذلك اضافة لعمل الروابط والأكواد (.11173/11) وغيرها وهذه صورة عامة للمحرر: 


م د وعابا: > حامةىوقة ا 1 ظ 
8 أبحات 5 م عق [1آ1 1 85 [ | ا 
ل || تق امه |« ح-: اء ة 2 | لعل | كا لخ وغ | ع« كك ديف | أ« عداه ممع > اموق خممع 
7م | مط شق اه ذم فنا نا "5 | 1؟: 
قا حا إكارهادء ادا نعااها| كات 
ا 
70 نا تعوعردلايا م :لاحم 


تركيب المحرر (101[) 
بعد تحميله من موقعه الرسمي ()©373333.100111126011161216011601:.2) نقوم بفتح الموقع الخاص بنا وفتح المجلد (م02)) ونسخ الملف الخاص 
بالمحرر إلى داخل المجلد وفك الضغط الى ملف وتسميته بأي اسم كما في الصورة: 


1ع 10ه] بيع لذا انا * تاغانها ع قاذ * بضوعطنا صا عوساعص]آ > ع3012و01) 
92 1/0 ؛ع01ه0 - , 7 ١‏ - 
ع2 عملا1 750011 عغ03] عحم ةلا حتبيع نل 
عام عا :5+ ص 7١12/+6/١11‏ ممع لال ممغادء 0 [ا! 
8 1,607 عمخطءة 212 لاشقام نالا ١1:-٠م./11/.6.١”‏ عءزصمم ها | كمه امه 0 إل 
68 1 ...00 الما ل عصمعط) 7١نال+‏ ص + 7١12/١127‏ »عم © 5عع213 خأمععع8 رم 


كما نلاحظ أعلاه قمنا بنسخ الملف الخاص بالمحرر وقمنا بفك الضغط إلى مجلد واسميناه ««رو» . نذهب للوحة التحكم ثم (مدير الاضافات) وكما في 
الصورة: 
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رقع وتتصيب ملق الحرّمة الموجودة حلى الجهار 


ملف الحزمسة مازع معمعطةء | معدمك عاة ملا رفع ولنصيب 


التتصيب من ميلد دليل موجود ضمن مونعك 


مجلد دليل التتصميبة اصع مم5 2_هامرمعم ل سسكام مسمساتت لتتصديب: 


التتصيب من موقع إتترتت خارحي 


رايط حزم أل ل مخخطلر اناس كك 


لاحظ في التنصيب لم نقم بعملية التركيب كبقية الاضافات والسبب لأن حجم المكون(المحرر) كبير بالنسبة للموقع على (1002112056) ولو كان على 
سرفر حقيقي لكان بالإمكان التركيب كأي اضافة ولكن هنا نقوم بعملية (التنصيب من مجلد ..) كما في الصورة حددنا مجلد دليل التنصيب وحددنا اسم 
الملف والمسار بعد ذلك نقوم بعملية (التنصيب) والضغط على الزر. وسيتم التركيب للمكون. وعلينا أن ننتبه للمسار وطريقة وضعه وأن يكون صحيحا 
كما في الصورة وغالبا ما تكون ١(‏ ) الأخيرة معكوسة نقوم بحذفها وكتابتها من جديد. 


بعد تركيب المحرر نقوم بتعيينه كمحرر افتراضي وذلك من خلال لوحة التحكم ثم (الاعدادات العامة) وسيتم فتح الصفحة التالية: 





إحدادات الموقع إعدادات 510 
اسم الموقع * رواد النكنولوجيا | 5د4ع 2152 /[و 120010 الروابط الصديقة لمحركات البحت ©) نعم 
لموقع مغلق عد ستخدام روابط 11]10[]نالاع] 00 تعم 9 

9 إديدء وا * إءء١‏ > + ؤب ١.‏ - > 9 ١.دة‏ 2+ وبح و. ده 5 
رنالة احامق لموقع إخقاع ٠‏ ستعمال رنالة خاصة سعمل لخةه لموشع قر اضبية للرسالةه 35 5 لاحقة (الطاط) إلى عناوين الانترتت قد 5 
رسالة الموقع خلال ايقافه للتحديت والصميانة 1 5 د ات 8 36 50 5 ل بية و قو دواع 6 
ورسادة الوم تمن احدد يل والصنيائك | از موكعم مغلق مؤكقتا ننصيانة وانتحديث_ <<2ط /> تفضل الأسماء الستعارة بالرمز الموحد نعم 0 

0 - 8 - 4 
بانزيارة في وكت لاحق. شكرا 
دي ل ايمسر قد 8 عون أينة تجبعن:., انم المو قم ق, عت ن:, الصقحاتك 5 

وله الموقع خلال إيقافه تحديد تنظيف ماب تضمين انم الموقع يي وبن الصقح 1 و١‏ 

: الكؤد إلء. نا‎ ١ 
- © إحذاذات الوركمة ا(‎ 

لدت تت د 6 كت ١‏ إحعدادذات سحل المتصفج - الكوكيز - 
كص ا يي المحرر - 06]][الااع000) 

ا 202 الفحرر- يدون محرر ْ اسم نطاق الكوكيز 
مسنتوى الوصول اث قفو ابي المحرر - 1/1)22/[م1 7 ؟ 

ذيدة_ د بيج وف --5 مسار الكوكيز 
حذ المنحة وقراضبي 20 
حد التغذية الأخبارية الإقتراضي ‏ |10 ” 
بريد التغذية الأخبارية لبريد الإلكتروني للكانب | ”7 


من خيارات (المحرر الافتراضي) نختار (71):17, - 1701607) كما في الصورة أعلاه ثم حفظ وإغلاق. 


إضافة الحقوق للموقع 
يمكننا إضافة الحقوق للموقع أو للمالك فمن خلال إعدادات القالب يمكننا تعديل الحقوق فمن لوحة التحكم (مدير القوالب) ثم ( - 511261:_5766©1412 
11114) وستظهر الاعدادات كما في الصورة: 


116 3131 ا لزمرمنا بنان لات 0ل * تن 


ا بزاع نن نات 1ت . كر 1 
8 دوه ا بازاعم دوها القمك أراونا * 


/زذا 101180ا5قعنا كعم ماك ورممل؟ برط لعروزععان]؟ 
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0530 6 - ١5 
ان رةه‎ 
١ 1 


كما نلاحظ أعلاه اضفنا الحقوق لمالك الموقع وايضا حددنا ((710) لشعار الفريمورك (12»112). سيكون شكل الحقوق في الموقع كما في الصورة: 





ملاحظة : يمكننا حذف محتوى الفوتير كاملا ووضع اي بيانات أخرى في حالة كنا نعمل في مجال إنشاء المواقع بالإضافة الى تعديل أي كود ضمن 
القالب ولكن كل ذلك في حالة شراء ترخيص القالب من الشركة المصممة له. 


٠‏ ولشّوه ر_ ٠‏ ى ا6#© بهم 
إضافة عنوان رئيسي للموقع 
بقي لدينا عمل عنوان للموقع باسم المؤسسة المالكة أو المالك للموقع ليظهر في شريط الموقع ولعمل ذلك من لوحة التحكم (القوائم) (1ا<اء381 صنه31) 
ثم نفتح (الرئيسية) وستكون الاعدادات كما في الصورة. 


لتقاصيز 
4 خيارات تمودج العرص 
وخ عتصبر القائمة نقالات المهيز تحديد 2 
4 إعندادات المقال 
اسم القائمة * الرئيسية 
سم 00 4 خيارات الدمج 
حب 0-7 
سم المستعار 5م5502 4 خيارات نوع الرايط 
5ك 3 0 
ملاحة خيارات عفترص الصفحه 
الرابط 0ع الاأوع ]> الاك 001211 _1اممحمه أأمه7 ملام .عع 0م 1 قحة المئتصة الرواد لتكنولوجيا المعلوهات | ١0‏ 
عنوان صفحة المتصفح الرواد لتكنولوجيا المعلوهمات | ١0‏ 
اثدقة تشور 7 00 3 
ملظو إظهار ترويسة الصقحة 89 هه نعم 
مستوى الوصبول ءانه ؟ 
٠‏ ترويسة الصقحة 
مكان القائمة * لامعا! مذدانا ؟ 
ا 
العتصنر الام جنر تنصر القالمة ١‏ 
لترتيب الرايسي ؟ 
عد 4 خيارات الكلمات المقتاحيه 


من الصورة أعلاه على يسار الاعدادات (خيارات عرض الصفحة) وفي حقل عنوان صفحة المتصفح نقوم بكتابة اسم الموقع وسيكون شكل شريط 
الموقع بعد الحفظ والاغلاق كما في الصورة: 


















2# الرئيسية يكل ١‏ > الرواد لتكنولوجيا المعلومات | 15 5:6[ 7 72 روا التكتولوحيا | 05100625 ل 1 كر الرئيسية 3 / 


نتكاناها الععاعات 1 ل /ركت_قأصمملومطاههو| 5 كم 


إضافة ١‏ لبيانات الوصقية 
من البيانات المهمة للموقع اضافة بيانات عامة تصف الموقع بشكل عام بالإضافة للكلمات المفتاحية الخاصة بالموقع والمهمة لمحركات البحث ولعمل 
ذلك من خلال لوحة التحكم (الاعدادات العامة) وستكون كما في الصورة: 
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9 ديدم ١‏ د 
ر ندل اخحاموق لموتع 


+ + 2 . يهو رمن وس 39 ١‏ 4 > 
1 8 لقاقه للتحذب 0 
الث الشوئع حك إلق كه سس سد تداك 


7 ودع به > بهد ردان 
د ث١ ١‏ 8 3 آيداة 

صور د رلته لموقع خامل إبماقه 

1 لانت اد * 

لجرلل م خر صدي 

تغلاء أك.نتةه إالافت زد # 

لضام اللحقع 2 شر اصدي 
7 3 1 الكوكت زه #* 
757 5 8 د 

مسدوى الوصبنول ام راصي 


بيد _ > بيكو اب 
كد الملحةه وخر صبي 


التعترة الأن ا خ الافت اه 
حد سكحيبكءه خبر به يشر اصبي 


ااجدى ار إلى د >1 > ف يدرس و١‏ هد لؤقء١؛‏ ي# ١‏ د 
لكلفات الفقد حده لليددات لوصتبه لخاصة بلموتءع 
- - 2 : ح 


الروبوتات(805015) 


حقوة المحدروة 
العا الساتات ال قدة لكان 
إظهر البدددت صية عداك 


ظهار إصدار جوماد! 





إرواد النكنولوجيا | 45ع 2102 /و 7120010 


تعم ع 


أخقاع . استعمال رسالة خاصة استعمال لغة المو كع الافتراضمية للرسالة 
5 - د ان . - 0 5 7 كرك + 

الموكع مغلق مؤكتا ننصيانتة وانتحديت <خط /> تفضل 
بانزيارة في وكت لاحق. شكرا 


7 0 #اسيتة 
عثال - بوؤأزلع ؟ 
خونل خديار ؟ 
عأاطنه8 , 
00 * 
010 * 
لبريد الإلكتروني للكاقب _ ” 
رواد اتتكنوتوجيا مومع متخصص في تصعيم وتطوير اتموامع 


الالنكتروتية 


مواكع,انكترونية,تصمعيم ,تطوير,استضافقة,رواد,انتكتونوجيا 


اننا أه2 ,عرعنما ١‏ 


كما في الصورة اعلاه لاحظ الحقل (البيانات الوصفية للموقع) تم تعبئة الحقل بسطر او سطرين نبذة عامة حول الموقع. في الحقل الذي يليه (الكلمات 
المفتاحية) وهي كلمات مفصول ب(,) وهي الكلمات التي نريد من محرك البحث أن يبرز الموقع الخاص بنا في حالة تمت كتابة احد هذه الكلمات فيه. 


حذف البيانات التجريبية 


قبل رفع الموقع واطلاقة لابد من تنظيف الموقع من جميع البيانات الافتراضية وخصوصا التي اضفناها اثناء تركيب جوملا سواء المجموعات او 
الموديولات او المقالات وسنقوم بحذف هذه البيانات من خلال (مدير المقالات) (مدير الموديولات). 


8 نيز د خة من الموقع للرفع 


إنشاء نسخة من الموقع 


بعد أن انتهينا من إنشاء الموقع بواسطة جوملا وقمنا بتركيب الموديولات والمكونات الاساسية والاضافات واضافة وتعديل ما يلزم نقوم الان بعملية 
الرفع للموقع. سنحتاج في عملية تجهيز الموقع الى اضافة جديدة للموقع وتقوم هذه الاضافة بعملية تجميع ملفات الموقع وقاعدة بيانات الموقع ايضا 


ضمن ملف واحد. 


تركيب إضافة (72ع©12_21م») 


نقوم بتركيب الاضافة بنفس طريقة تركيب المحرر (70017) راجع الطريقة. 


بعد التركيب من قائمة لوحة التحكم (التطبيقات) ثم ([132[1 12عع-41) كما في الصورة: 
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مدير المقالات 





ف 
الحخذيات الأخبار د 
' (ْ 3 إخبار 4 
ع هه م آلر: سائل لأخامدة 4 
0 : 

1 58 27 تحديث جومتك] 1 206 

مدير الفوديولات قثير الإضاقات الإعدانات العافة 
لإأعدسصن ٠»‏ 
9 دليل المواقع 4 


بللا 


لديلك آخر تسكة هن جوهلة! لذيلك آخر أصذار هن كل 


اعد ينور مازع غنال 


أل صباقات 


هذير الومائط المتضدة 








سس 
5 فللا 
ع 
مدير القوائحم مدير الستخكذمين 
|1 1 ) 09 
هدير القوالب تعديل العلف الشخصن 


سيتم فتح الصفحة الخاصة بالترخيص والموافقة على القوانين الخاصة بالإضافة وسيكون علينا الضغط على الزر البرتقالي. بعد الانتهاء من ذلك ستكون 


نعود للوحة التحكم ونعود للتطبيق وسيكون لدينا الصفحة التالية: 


2 مناكاءج8 جلاععكام 


1 تعاأأماط عناناعك ‏ عالزممم مبماعد8 ااناجاع0 ؟ 
510111111211 5131015 


82516 5 


]51 ناملا منكاءقط مغ لألدجع؟ 15 منماءج8 و5ععءكام 


2014-05-6) 311.0 عه منماعد8 و5طعععام) و-. 269 
4 ب 


101 ع0321منا 1020ع8 


1015م 
ليحلييت “لجإراعانا 


201110 201110 


1/1230 


5 مالاكا 583 د 
20001001 
51311 2014-05-5 يت 
0000 3 131680 مناكاء83 الخميس, 15 أيار 2014 21:02 
53/5 
مناكا2ط 5غ 10111 0263 عوبااععاع 
010 0مرعكاء83 
م1 منماعوط عازه اانط © 5 
0مق و5عالط 5 | 0330358 
06005 ناع»اع 
مأقناءع»اع 


0 


الا لا منماءج58 


من خلال الصورة اعلاه نضغط على (71018 1832©1017) والتي تحمل الأيقونة 


لاهلا منماءج8 


23 5عاأأممط داع ]الاك 


9 ها 


5مناكاء583 13308 09 ا نناع الا 


. وستظهر الصفحة التالية: 


4» 
9> 


العم تشدد 


27 


79 1انالع 51 
كع »زرا 
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1 


الخيارات 


لك 


2 لاهلا مدماعه8 ::مناكاء 83 جراععكام 9 م 


الساعدة إعموط امعاممن 


09 ا بناعا/ا 5مناكاء83 ١/3030‏ الال" منمكاعج8 2011110 أعموط امتاومي) 


مباكاء23ط نلا 3 512116 


1 تعااأممط علاتاعى ‏ عالزممم مبماعد8 ااناجاع0]  *‏ 28 دوعالزممط (اع الاك 


0 131 مناماع83 السبت, 17 أيار 2014 14:06 


0 نأمأاعوع0 51011 
8 المع اناملا 101 ع30م 5منكاء583 ع130390/اا عط ها 3عمم3 أأأنلا قلطا . 
0011111 مناماعج8 
2 
ممع اتاعنالامء اناملز 101 زعا الغ ع االاانالخعط نه ةالقأكها عط ما) عناااعة مبماعوط عط ١18510‏ 300 عو3م ومنماعج8 ع3039ا/! عط طاغمط نا نقعمم3 ااانها قالطا 
ل نملا مبماعجم! 9 لصتاف حاف ديم 
و م ه© » ٠‏ 3 0ى مى ه 4 4 َي 8 
نقوم بالضغط على الزر الأزرق وستظهر الصفحه التاليه: 
_© 
الا0ل! مدماءت8 ::مناكاء 823 جاععام «٠‏ 


الساعدة إعموط |معأمم6 


09 نناعا/ا 5مناكاء83 ١/3398‏ لاهلا منماعج8 20111101 أعموط امتأحرمي) 


ع7725530 ,مع عه ممأأعامدممء 3 عع5 نامز 5ددع اانا 30م غ300 0غ عدننامرط أمم ول عدوعاط. 


55ع 21001 مناكاء 582 


010655 مناكاع هط 10 1لدتاأتدا 
ل ا ا لت نات نللةا 
221255 منا ل0نلاعهق8 


كع!11 منا 0نلاعده8 
ك5ك0106 مناكاع هط ع1 ومتتدوطآ] 





0 35 8500158] اعللاع5 351 ا 


من خلال الصورة أعلاه يتم عمل نسخة كاملة للموقع. وعليه يجب علينا أن لا نقوم بعملية تنقل داخل الموقع والانتظار حتى تتم عملية النسخ للموقع 
كاملا وبعد انتهاء العملية سيتم ظهور الصورة التالية: 


09 باع ا/ا 5مناكاء83 303908 اثاو لا منماعج8 م2011 أعمج2 امتاحصمي 


لاأاناآذدذ5عع6با5 ل0ع161م001 مناكا 58523 


/[ااناأوقعععناة لعاعامدممء 835 5و5عع60م مناكاعقط ع١‏ !007913401361005 
0م 30011 0غ 31/1936 301 3ع ناملا 


> زه اكرات ا تا »ياتلا ١09‏ تنتعال/ا 


من خلال الصورة أعلاه نقوم بالضغط على الزر الأزرق (1326©1015 ©09121138) وسيتم ظهور الصفحة التي فيها النسخ الاحتياطية كما في الصورة: 
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0 ونام أرعوع0] 251 انا 5نا513 أو 011 عمنا1 عالزممرم 512 لههاننتنهنا 8 عودودالنا 


ل 
23 


البحث 


حاذة التعبيد 
: يض 


مصداان.. 
لد 


4 7ه قع!3] مدماء63 السبت, 17 أيار 2014 14:06 2014-05-7 0017 |0146 | 0مععاء583 اانط 1 4 ذااا 8 . 20148517-148658 -51+6-10311105 
منماعقط ه00 روم 


مو 


النسخة على الجهاز. 


نقوم الان بنقل النسخة إلى أي مجلد في الجهاز كما في الصورة: 





1ع 0ام] بيع لذا ]نا * حاغانانا ع قاد * بضوعطنا ماع وساعم]آ > ععاموو0 

ع9 م1 700110 ع03] ةلا جع + وياوع جد 
8 14,590 عااع شمل ه7بع. م /7.15/.6/(1 دمز20140517-140650-:دمطاهء ماع ؤزو [ | | ممغاىء0 !1 
0005 1 


نلاحظ في الصورة اعلاه ملف مضغوط بصيغة معينة وتوجب عليها قبل الرفع للموقع فك الضغط عن هذه النسخة وضغطها مرة أخرى ولفك الضغخط 
سنقوم بتحميل أداة متخصصة في فك الضغط لهذا النوع من الملفات وهي الأداة (221111721:0 ا ل[ ماعع ]1د ). وينصح أرث تكون النسخة في مجلد 
على سطح المكتب أو عدم وجودها في مجلد مسمى باللغة العربية. 


بعد تحميل الأداة وتركيبها على الجهاز نقوم بتشغيلها وستظهر كما في الصورة: 


| 55 || هع |[ ص | ل ل قا 
0م نا لامعو 
همل (م4065 7-1 4051 01ا2 اكه طاوعه|-عئأهم ا ححمه ركم مماعع نلائاع لذ م عا عمتتاعيثر 
ناك تدم طادعما-ع رس ذه احصمملأممماوع ناكاع لكا معمع اتوعولاات معام مذ مومع 
معني واعمق كنال رمآ أعمرموبوعوم 


5 أكملم عرمون1 
صل اطانتتمة وصااع وات أسامط نار أدعة) صدم ونا 


إخع تعدا 


ككعرومم نا ممع وح 


ا 77سسووووسسورم 


حركام. لاقع 0 /,امتصابع 51 | مردوع ا كلع التردع51 | دزتراعظ_تكزامع كملاع لاه متطامع 1م غ3 كال ا تمه 





المع مناعاء مت مطاعع عام ”, دمانامممكئتتزدرهانا .كا كدامصطء !اذا 2011-ةاثاناك 2 أاو مم 


كما في الصورة أعلاه في الخيار الاول حددنا مكان النسخة. والخيار الثاني يتم تحديده أتوماتيكي وسيتم الفك في نفس مكان الملف المضغوط. ثم الضغط 
على الزر (12012©)0). 


نذهب للمجلد التي فيه النسخة الخاصة بالموقع وكما في الصورة: 
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من 


ع اه بعلا ]نا * طاغايها عفاد * بصوعطنا ماع وساعص]آ معم0 و > ع3012و:0 
52 عم1 50110 عغ03] عحمةلا 1-7 
عاد عام :٠م‏ /ا(/ه./15١7‏ 51-20140517-0هطاهءماءع ةزه يل | ممخاىء 0 للا 
8 14,590 عا خمر 76ب6١‏ م /[أإره./5١1١”‏ دم[ 5-20140517-140650مطاقعماءع:51 ل 5ه اصييه0 لل 


5عع3ام +مععع8 إك 


كما نلاحظ تم فك النسخة الى المجلد بنفس الاسم للملف المضغوط. نقوم الان بعملية الضغط مرة آخرى وذلك عن طريق فتح المجلد المفكوك وتضليل 
الجميع ثم إرسال الى ( 1"0101©3 7177601 1:©556)1م20011)). كما في الصورة: 













































'عل1ه؟ بعلا معدا * طاغانها ع قاذ معم0 > ععاصوو01 
52 م1 500110 ع03] عحمة لا 2 
سس سس مغم أ وتمتصلة لل ممغادء 0 للا 
لاغانها عرقطد 
| ماعو لك 005 -1 
...أ ةطمععم ماوعا معأرمممده عمتطمحرم© ‏ يا تك للكن كعء واه غمععع5 يك 
دياك فحص الملغات المحددة باستخدام 6 كألاء 01م لامع نك 
.ع لاقطءة مغ لمم ف ععوقمما لل كع لمووطنا 
"د؟.20140517-140650-ؤدهطادعما-عغزه" م لمم هه كع فناعما نكن ا 
...القع لصة ععع ممصم 8 «واطاعدد 1 0 الك 
زم 
اأقممعء مهو "20140517-140650.32-خ5مطاوعما-عغ د" مخ ووع: محوره) 8 ْ عوصودد ل تووم 1 - 
كع لومطنا لل دمع ١/10‏ كل 
610 (لعممه) لعددع مدمم 1[ ا< 0 50 كوها لال 
#نءغ مط عذأوع,ع) ممغادء 0 19 ف لم للى منامروع مرولا - 
ماع00 عد 000 كعانممم لل 
أمع أماعع, ينوع يكو كمتوسام نل عغداممره © التقار 
تمعنمع: اتقالا 3 أنا 01 عاهع 0 كعغداممة؟ لل (ع) ادام ادها ولك 
عميوادك © ع0 ممع يل (:0) عجدساه لا معلا وى 
عليه الامروع 1‏ 8 قمعم لومم 7 (:ع) عددساملا معلا وى 
(:6) عمق0 /الله ملام فق عع ماع مهم 5كععع588 |[ | () عدصدساه لا معلا ى 
00020 ا | | ل ننءك:1155111313ا لتب لاحتسا الشا ا لش عام *" ٠‏ تمع لاالخاص ب 121502 7 
68 18 غ727اناء 00 مه 1 ١6:2١‏ م ١١15/١6‏ غأذلا )لا حا 
8 5 لاع 00 مه [ م /[اا/ره٠/11١؟‏ غا/اناشعة | عا بطع ذا 6 
118 غ772ناء 00 غم 1 0 م لأاارة١/1؟‏ 5غمطم, |[ )| 1ع ل لاع ع7 اللاو 
68 2 انا 00 مع 1 :0+ م لأ إ/ره١/5 ١١1‏ 9معطع نلا 








بعدها سيتم ضغط جميع الملفات في ملف مضغوط واحد. 


رفع الموفع 
بعد ان قمنا بتجهيز نسخة من الموقع وضغطنا الموقع الجاهزة ستكون عملية الرفع مشابهة لعملية الرفع للتطبيق الخاص ب7117 (راجع الرفع). 


تركيب الموقع 


بعد رفع الموقع الالكتروني للسرفر او المجلد العام للموقع الجديد نقوم بفك الضغط للملفات كاملة وثم نقوم بعمل قاعدة بيانات جديدة 
التركيب وتفريغ البيانات المضغوطة في هذه القاعدة. وقد تعلمنا مسبقا طريقة انشاء قاعدة بيانات جديد (راجع الفصل السابق). 


للموقع لكي يكو: 


بعد عمل قاعدة البيانات نذهب للمتصفح والدخول على الدومين او الرابط الخاص بالموقع وستظهر صفحة التركيب كما في الصورة: 
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حارف | 40-0-5211 > | تك ك1 01 





اك ل ع م ايا ل يلي عت 2 )| [ع301م 1م00 007 10 0لع05ممنا5 ع3 ناملا أحطننا ج10 0ل 


0 «<« ملناأء5 5116 < ل دمنأدمادعم 033635 « 54311361005ما-عمرم 


5 566011111611060 >ا 616 155211361011-عرم 
1 انلا زنط متم اانا عاناذمع 10 عمع00 مز منعزم ,10 مع777270امعع6 ع3 5ورلئاء5 مدع 1 أعع ام 10 5نملأع3 131 ع35عام اع (0لذا 35 713120) 01160ممنا5 أ60 5آ 1175 ©1525 01 /[30 1 
00 م6 ع1 لاء 5131 ع نان أ00 0ل ذوصلئاع5 ناملا ]ا أداعم0 نأك الأننا !0073ل ,أعناع رونا لإأأعع امع وناأله لاع لان 00 ]0521| !0017ل اناملا 10 20ع! 0انامع 50 00 مذ عالااتجع لزاعلا 
600111010131101 8 
9 لا 5641110 
لا اوت »ةا 5610110 2 24 -< روزورع/ا منرم 
05 015 10 5216 011ممنا5 لماوع م رهص طزا2 
|01 20 105 /[3ام015ا 011ممنا5 انالا 
عه اننا مسوياهة 76> 014ممنا5 03130358 
09 لننكا عنما 65أ0ناك عأودالا -_ أاناهاع0 15 3001130 ١‏ ةقانا 
3 )0 5ع101ا0 عأاودا/ا 
كح اه 5 7 01 30ماقع/0 ومنأه زاا 
|01 01 11110ع]آنا8 أنام آنا 
0 07 53 ولام موأددع5 26 ودين اس يف 
011ممنا5 امكل 
00 أ 00 أمممنة على عباناجل١‏ 5 
ع7 عاطدع ]لاا مره أ2؟ناوا ألم 
71 !++ 51 071 ه(ه]نا كا 585236 


3 اماومع/ا امي لالااى 


عند ظهور الصفحة السابقة نقوم بالضغط على الزر الأزرق اعلى على اليمين (771»<0) وستظهر الصفحة التالية : 


ألا[ ج لورفا عراف تام هكيك مم 





كع ل ين عن 2 ا إعأمدم مهما 007 15 0ع05ممناك ع3 ناملا أدطنلا جع10 0ل 


0آ15ضاع «<« ملاأع5 م511 «< 5851034100 03432356 «< 5]2/31100ما-عمرم 


03132235 0311 5 "©5116 01 51012311011ع2 


5 0ع0123116م2 51+ 001116101 
© «مبنماعج8 132165 50 أذاناع ا أآلالا 9 ؟" (0ععقاعم) 1 الكك5لاارا عم/ا 10313035 
9 _8مناوع 1 عاط13 10313035 89 06211051 051 أعلثاع5 10313035 
«أعم 12111 
© كتاععداء بزعا لرواع10 55ع]ممنات 7١‏ © 05211111 03 عونلا 
1 
© ادع 5 اذا أه 0جعأ5ما عنقم إمعم عول 5 من | 355101010] 
2 026035 0313035 

© 03130356 زه نرهنأجاامء 8- آنا ععروع 
© ذ5عاطقا ره نم1 أداامء 8-+ آنا ععرمع 

نا ملاع 


3 ماةع امت لالز 
لاحظ في الصورة أعلاه في هذه الصفحة نقوم بعمل الاتصال بقاعدة البيانات من خلال ملئ الحقول على اليسار حيث : 

©م9 172425356 : نوع قاعدة البيانات (تترك كماهي). 

1212 120516 5171 172491356 : اسم السرفر المستضيف لقاعدة البيانات ويختلف من سرفر لآخر ولابد من كتابة اسم السرفر. 
17961 : اسم المستخدم لفاعدة البيانات. 

0 : كلمة المرور. 


2212 17218356 : هنا نكتب اسم قاعدة البيانات. 


0ى 
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م 


بعد ملئ الحفول على يسار الصفحة نواصل عملية التركيب ونقوم بالضغط على الزر الأعلى على اليمين (ء/8) وستظر الصفحة التالية وكما في 
الصورة: 


103132256 0 


ا 335.23 5]00 ع 
لكا 554.42 512 |0193 1 


11 11 أأع| 1117 251112160 





ستظهر الصورة أعلاه لعمل الاتصال ونقل بيانات الموقع الى قاعدة البيانات الجديد والموجودة على السرفر وبعد الانتهاء ستظهر الصفحة كما في 
الصورة التالية: 


0ه 103132256 
اأ55ع 5066 35/لا ١0121101أ5ع]‏ 0213235 111 


15 01 معأ5 أنزع0 ع1 10 لععع0م 3110 012100 ذ5اطا ع5ماء 10 تلاماعط نامغأقأناط علطأ عاءااى 


تاليا 





كما في الصورة أعلاه تظهر الرسالة بتمام العملية وبنجاح. نواصل التركيب ونقوم بالضغط على الزر الأخضر (([ء)5 721»6). ستظهر الصفحة التالية: 


5 إع5لا اعمنادك 


9 ؟ 20110 57ل اعملا5 
9 7-.3100إ69آلا5لالا_لاع الجالا-ع 
9 مدع نستين 5 لبومسححوة 
9 ......... | (63]6م68) 0ملاووجم 


كما نلاحظ سنحتاج لتعبئة الحقول الخاصة ب5))185 11961 “دع م5 فقط وبقية الحقول نركها كما في في الحقل الأول سيكون اسم مدير مدير الموقع 
الحقل الثاني للبريد الالكتروني الخاص بمدير الموقع. الحقلين التاليين لكلمة المرور. ثم نواصل التركيب بالضغط على (776:1) وستظهر الصفحة التالية: 
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ركنا 


5نا0[/اع] م سوه 





ل ل عات 2م ) !3016م "مهنا 007 10 0لع05ممناك ع3 ناملا أ2آنلا ج10 0ل 


6 < ملأء5 غئ1ز5 < زوم أأدمأدعه ع02313635 < 100أدالمأدماعم 


62105 631 (1051] ألاع1ع0111 3 01 5217 ع5آ] 01) 5اعلاع5 ألاعع]11ل لاععنلناعط 01 ع1[ ]ع/ا0 2]100نال ألم ععللاع5 ما كععمعع]011 ,لع(مأد5ع؟ لإ[اناأو5وعععنا5 عع 35] ع511 اناملا 101001 معباط 
ا251001اطنا0!] ؟لا0 ا (0110115اا50 ؟أآ11 2110) 621155 0111م 601111171011 11051 11 لعاعع[امءع ع/ئت] علا ركعنا55! (أعلا5 101 ]01مملا5 0110م أ0لض3ء علا عاأطاللا .عأا5 لعمأد5ع؟] اناملا لأأآنذا د5علاودا 
1 72]ناء00 1115 10 عأماا عا انلا ناملا 101/10100م ع3 علا بععمعامع/الرمء اناملا 0ع 21101 11اع77اناع 00 


لسغط. دغ 351ط2م/عءغهه0دء 1 طناه222102/2عتتتاكت 00 /إقامت . متاكآء و طقطءععع21 . 67م / / : قمعاغط 


ناملا .ع5 الاملا 55عع36 10 انأ ع 'ناملا أعلاع عالقا حال 3032 "اللاو لاك عط الأننا (أملرء5 100أ2مأدع) عأز5 ذأط) عاتلااخ 300 1030 001 الأننا !00713ل ,غ51 اناملا 0ه 5أذالاء /ع1010 دمدةعهة11مغ عصة ع1 35 00ما كم 
1131/5 10110170 115 01 عه ودأكنا لزماعع( أل ذلطا علامروع؟ 10 عناجط لأللا 


00151 !0117 ع1 ذا تامأأناط منا قجعان) علطأ نه عاعااء 30 طق / /00010أنازا اع1/5ا0 115 ع5ماء أذناز ممإباكاء3ة58 603ع6عكل8 01 651401341011 1116013160 156 01 غ31ؤأ5كاء1؟!ا 03ععكالم 0 اانا 31 لاملا 17 ٠‏ 
.لاعم االأ5 15 510131101ع 2160 اوعآاما 11 01 ]21أكاء4كا عععانذها دأ / 001 ألا 


تلاط وأللاهاام؟ عط مه عاءناء عنامطة فط 04 301 و راذنا 704 3:6 ناملا 1 ٠‏ 


300/01 ددعم قغط. 10 علقط. ددعم قغظ 7803016 10 31/6 3/50 /[13 نا0/ .05116ع/الا نامل 10171 018101 دمةغه11مغ دهش 118 ع/ا0تراع] 10 001310771]م 8ع الاملا 5لا 6311 ناملا 13115 6156 ١ل‏ ؟1 ٠‏ 
أ5الاع 5ع!11 11١5©‏ ]ا 121 . طم 10 ع1 ةط. 121 . ممطم 


06ع]ع]ع] الاملا 101 30م 1115 أناه أللام 10 قتا بإا72 ناملا 


3 51011]ع/ا اطي لالااى 


من خلال الصفحة في الصورة اعلاه نقوم بالضغط على الزر الأحمر (401:9ع111:2) 11254211211012 ©1126" ©12©1207) وستظهر النافذة التالية: 


إعغ!5 !ناملا 0١51لا‏ ]51231 10 /إ200ع5] 


ع5نا 101 /إلدع؟ 15 5116 ناملا 30 0ع/701اع] لاعع2 135 لإاماع018 دسمداعه 211 55د 11 
65 31101] نان ألامء أعللاع5 10 عامل ,ادع 0721000 علا 35 ,121 001 عووعام 
ع أالاكلمء ع35عام 215مم3آ 15أآ] ]| 511 ناملا الأآناا كاملا 5505| 50171 ع/1ل2آ /121 ناملا 
اانا 0اأنئزه1ا10] 

لاط . 5أ 222553 2/ 0112151100 /1011:-آ2:1آ 11ع تدا 00 /قامت . مونا كات د طلططاع» كله . 7717/ / : 105 
812126] عالاأناا ناملا 101 _41انا 1136 80010713116 :م11 

1]0111-210 5'ع51]1 اناملا أأ5أ/ا 10 ازاماع (امأأناط عأ عاعااء ناملا 


0اع-1]0111 ك'ع]51 اناملا أآكالا جم 





نقوم بالضغط على الزر الاخضر اعلاه وسيتم التوجه للموقع وبذلك يكون قد انهينا تركيب الموقع وسيكون شكل الموقع النهائي كما في الصورة : 
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الرنيسية كدماتنا ‏ هحول رواد التكنولوجيا الأقسام أخبار رواد التكنولوجيا ١‏ اتصل بنا 





هدَأَلَل الرواد لتكنولوجيا المعلومات 


1210101! 





0 4و ا . صصع 1 

شبكات وصيانة حاسوب 0 
٠‏ 5 ينا ٠‏ 

تصمم سيكات يأحدت التقنيات ويكل احتراقية وتقدم خنمات الصيانة للحاسيات والتيكات 5 ]|اممق عنرهولاظ| أوووء 
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21,00 


411001 1101*111 اا 4140-11]د 


تحسين محركات البحث 
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الباب النسادس 51:0 


مقدمة حول محركات البحث و 510 
المواقع الالكترونية عبارة عن واجهة رسمية وتسويقية للمؤسسة اضافة الى ان المواقع الالكترونية تعتبر اداة تسويق للمؤوسسة سواء التجارية أو 
غيرها ولكثرة المواقع الالكترونية وتشابه مجالاتها وبالألاف وربما بالملايين فلابد من يكون لكل موقع الأولوية في محركات البحث والوصول إليها. 


هناك الملايين من المتصفحين الذين يستخدمون محركات البحث للبحث عما يريدونه وليس كل موقع إلكتروني وإن كان مصمم بواجهة جميلة ومميزة 
بأن يكون في صدارة المواقع في محركات البحث. هنا مميزات تقنية وفنية لابد من توفرها وأن يكون الموقع الالكتروني صديق لمحركات البحث. وجدت 
تقنية نستطيع من خلالها أن نجعل الموقع الالكتروني أكثر تأقلما مع محركات البحث وتقنيات بروزه كموقع له أولوية الظهور في محركات البحث. 


ما هو محرك البحث (ع :اع ]1 طاعتروء5) ؟ 


هو عبارة عن اداة في الانترنت يقوم بعمل بحث في فهرس ووثائق عن مصطلح أو عبارة او نص معين بواسطة المستخدم أو المتصفح. ويستخدم هذا 
الاسم عادة للإشارة إلى محركات البحث على شبكة الإنترنت الكبيرة التي تبحث من خلال مليارات الصفحات على شبكة الانترنت. 


ماهي (51/00) 072111212211011 عتناع ]ا اعتروءك5 ؟ 


ترجمتها (تحسين محركات البحث) ولكن التعبير الصحيح هو التحسين الفني الأمثل للموقع الإلكتروني ولكون الموقع الالكتروني له الأولوية والحضور 
في فهارس محركات البحث وضمن ترتيب مميز وأن يكون صديق لها. و تساعدنا هذه التقنية لتحسين ترتيب الصفحات بواسطة العوامل المؤثرة 
وتحسينها للحصول على ترتيب مميز في محركات البحث. 


أشهر محركات البحث 


من أشهر محركات البحث ( 1و4 - عدزظ - 115171 - 00طولآ - 600816 ). 


كيف تعمل محركات البحث 
الزحف العنكبوتي (”0121819» 1061م9) على الويب للعثور على الصفحات والنصوص وايجاد الوثائق الجديد بواسطة الروابط (وع1دنايءم23) 
الموجودة في الصفحات وفي قواعد البيانات في المواقع الالكترونية. 


تقوم محركات البحث بفهرسة الوثائق والنصوص والأكواد وحفظها في قواعد بيانات خاصة بها وتحديثها كل فترة. 


عند طلب المستخدم لأي كلمة أو مصطلح بواسطة البحث عن يقوم محرك البحث بالبحث عن هذه الكلمة أو الجملة في قاعدة بيانات المفهرسة (وليس 
في نفس الوقت). 


تقوم محركات البحث بترتيب النتائج التي تم البحث عنها بواسطة خوارزمية ترتيب (ترتيب الأولوية). 
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تماذا نهتم بالتعامل مع محركات البحث 
نهتم بالتعامل مع محركات البحث لعدة أسباب ومنها : 
تعتبر محركات البحث هي المصدر الأول والوسيلة الأولى للوصول الى المعلومة على شبكة الانترنت. 


نهتم بمحركات البحث لكي يكون الموقع الخاص بنا صديق لها وتكون له الأولوية في الظهور في النتائج الأولى لأن الباحث لا يرى في الغالب بعد العشر 
النتائج الاولى وربما أقل. 


موفر من حيث تكاليف الإعلانات. 


نصائح عامة لتطوير استرائيجية جيدة فى (5150) 

تعيين الكلمات المفتاحية للموقع وللعلم تعتبر الكلمات المفتاحية الروح لل((5170) فهي إما تجعل الموقع في القمة أو العكس وتم عملها في أكواد الموقع 
سواء للصفحات الرئيسية أو الفرعية. ويمكن الاستعانة بوسيلة ( 1001 1223733010 2002165 ) وهي وسيلة مدفوعة (بمقابل) بالنسبة للمؤفسسات 
التجارية. 

القيام بعمل كلمات مفتاحية في عدة صفحات للموقع ويفضل أن تكون في العناوين للصفحات والروابط ضمن الصفحات أو القوائم لتعدد فرص واحتمالية 
ظهور الصفحات أو بعضها او أحدها على الاقل. 

إنشاء مدونة إن أمكن. إن انشاء مدونة للموقع تساعد في تعدد فرص الوصول للموقع من خلال الكلمات والنصوص والمقالات أو المشاركات والتعليقات 
المضافة في المدونة والمختصة في نفس الكلمات المفتاحية التي يتم البحث عنها. كأن يتم عمل مدونة في مجال المواقع الالكترونية في موقع متخصص 
في المواقع الالكترونية. 

العمل على مشاركة الرابط الخاص بالموقع مع مواقع أخرى ونشره ضمن صفحات التواصل الاجتماعي وادلة المواقع الالكترونية وعمل رابط للموقع 


ضمن مدونات أو منتديات خارج الموقع والتوجيه إليه. 


كن على إطلاع وبحث دائم في كل جديد بخصوص (51:0). 
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مم 


أساسيات (5 8251 5580) 


عمل عناوين دقيقة وواضحة 

من أهم العوامل في ال5170 عمل العناوين الواضحة والفريدة من نوعها ويتم عمل العناوين كما تعلمنا مسبقا داخل الوسم أو الكود <11771,[7> حيث 
أن هذا العنوان يخبر محرك البحث والمستخدم على حد سواء بالموضوع الموجود على الصفحة. بالإضافة إلى أن العناوين يتم عرضها في نتائج البحث 
لهذا فإن اختيار العناوين مهمة وتعمل دور التسويق وجذب الانتباه للصفحة او الموقع او الموضوع. يجب ان يكون العنوان مرتبط تماما بمحتوى 
الصفحة وان لا يكون عكس ذلك. بالإضافة لأن يكون لكل صفحة عنوان خاص بها. كما ينصح بعمل عناوين صغيرة ووصفية في نفس الوقت. 


مثال : 


عمل عنوان داخل وسم (11171115) 





ظهور عنوان الخبر ضمن نتائج البحث عن (المرصد العربي للعمل التطوعي) في محرك البحث جوجل . 


صحيفة 26سبتمير - افتتاح المرصد العربي للعمل التطوعي ... 
9 نم8 أطهرودوو|2مذام_15ئ3أع0_ذتتاعء ماع ممع5و26 > 


اقللجح اليوم زر نعاء المرصد العربى للعمل التطورعى الذايء لجامحة الدول العربية الهادف إلى نشسنس مقاهلم 


العمل النطو حننى فى اساط المجلمء البمنى 1 35 
- 9 جا كيه 10-5 0 2 2د 


ف حو[ ا زاذةظضخااس 
ل ححا د 


2 





عمل العلامة الوصفية (12©5011011012 01642) 


إن العلامة الوصفية تخبر محركات البحث عن خلاصة المحتوى للصفحة وما تتحدث عنه لذلك دائما يتوجب الاهتمام بالوصف الخاص بالصفحات او 
العناوين والأخبار. وتكون البيانات الوصفية عبارة عن جملة معينة وعدة كلمات تصف المحتوى للصفحة كما تكتب هذه البيانات في داخل منطقة 


<30ع:[> الخاصة بصفحة الويب. 
مثال : 


عند البحث عن (المرصد العربي للعمل التطوعي) في محرك البحث جوجل تظهر في النتيجة عنوان الموقع بالإضافة الى ال(101)متدعوء12 12 
التي تحت عنوان الموقع. 


المرصد العربي للعمل التطوحي 


١3051368 115‏ > /ونه_وطمام 
المرصد العريي للعمل التطوحي تم تأسيس المرصد العريي للعمل التطوحي التابع للاتحاد العربي للعمل التطوحعي في 


جا خا 


ا١-‏ لم5 ١‏ 5 لأتهء > و5 الثم يه 
لحتخاشسحة العز لله و اللده 1 نك ححجحفخحطظطة» [ ضداى > 
2 ريد ى'لدحى الديلى” -جامعي "م : 





صورة لعمل بيانات وصفية (:12656©11711011 01642) في سطر : 
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ير 


<301 115 > 
وي "2-8 1احتعت 25 فطع 12012 رمع "حم ورم و ورمع "موي 1 -6 2ت ئ ند "1-7 ناو مع ورعا عاط تمع قل 
<ع231251/»>دورة المواقع الالكتروتية<51812*> 


<"هتا وصقف الموقع ..وصقف مفيسط"- 01211221 "221251011 دعع0" -113208 12 02> 
20 122 ”> 





عند كتابة البيانات الوصفية علينا ان نتجنب كتابة بيانات بعيدة عن محتوى الصفحة ولا تمت لها بصلة. كما ان لا نضيف اوصاف عامة مثل (هذه 
الصفحة .. - صفحة حول .... ) . ان تكون البيانات الوصفية مطابقة للكلمات المفتاحية وان لا تكون مختلفة. كما علينا ان لا نقوم بعمل بيانات وصفية 
واحدة لجميع الصفحات وانما كل صفحة تحوي بيانات وصفية تصف محتوى الصفحة. 


تحسين هيكل الموقع الالكتروني 


تحسين هيكل عناوين المواقع (روابط الموقع او الصفحات 711*1.5]) 


نقصد بعناوين الموقع الروابط (71181.5]) وهنا نقوم بعمل روابط تصب في دعم الترتيب للموقع الالكتروني. ولكي نقوم بعمل جيد لإشهار محتوى الموقع 
علينا الربط بين التقنيات التي نستخدمها ونقوم بعمل نوع من التكامل بينها فمثلا البيانات الوصفية والعنوان والكلمات المفتاحية كيف نقوم بعمل تكامل 
معها ومع هيكل او رابط (عنوان الشريط للموقع). 


هناك روبط غير صديقة والتي تقوم يمر من خلالها محرك البحث ويكتفي فقط بالبيانات الوصفية او العنوان لمحتوى الصفحة ومثال على بعض الروابط 
التي نقوم بتجنب عملها قدر الامكان مثل الرابط الموجود في الصورة: 


8-2013-04-16-15-45-57/98-2013-04-16-15-17-6 9ع اء تمه رامع ممع /لأمعدمم مومع رم طامعرعلم/روءه.عطواه» 5] | © 3 





كما في الصورة يتضح من الرابط الخاص بها عدم الوضوح او الفهم للأرقام الموجودة فيه وقد تكون عبارة عن رموز أحيانا. 


وهنا ايضا روابط صديقة وتقوم بعمل تكامل مع عنوان الصفحة الخاص بالمحتوى وايضا مع البيانات الوصفية والكلمات المفتاحية للموقع او صفحات 
الموقع ومثال على الروابط الصديقة: 


باق 


97 مركز-البنان-العمل-التطوعي-ينفذ-دورة-تدريبية-عن-كيفية- إبتكار - انشطة-تصب-في- خدمة- المجتمع-2013-04-16-06-15-30/890-0/185/رمطمئاع 00 ت/روءه.قطهامها ذا | 326 ش 





كما نلاحظ الصورة أعلاه لرابط صديق لمحركات البحث بالإضافة الى انه رابط لموضوع معين الا انه يخبر المتصفح ومحرك البحث بمحتوى الصفحة 
ايضا. كما ان الرابط يظهر في محركات البحث ضمن النتائج كما في الصورة: 


1 1 من النتائج (عدد التوات .: 0.91) 


.9ه 00١‏ 4 و؟# 9 هب ه * م” و 5 جه © 
مركز لبنان للعمل النطوعي ينفذ دورة ثدريبيه عن كيفيه ... 
...-مركز-ليتان للعمل-التطوحي_ينقذ-دورة-تدريبيه- عن-010/.../185 101005 > 


/ - !ا > لا” الى 5 م 4 - [ذء زد‎ . ١ -- |>شة-‎ ١ ودزءى اإفى‎ ٠ 
نفد مركن لبدان للعمل التطو حي. دورة تدريبيه لعدد من المتطوعات. عن كيفية إبتكار انشطة تصب فى‎ 
خدمة المجتمع. من فكرة النتداط إلى التمويآ‎ 


يه كك > النك لا الآ الك دلأ . التكتضيد . ادددلو إأم>ل: 
0 ممى ثتثل_ه للسناط الى لتفويل و”تتنتحيدل وو حليالى لمثكالنل هه 





نلاحظ كيف ظهر العنوان في محرك الد لبحث في جوجل عند الد لبحث عنه وكما نلاحظ أيضا الرابط تحت العنوان والذي يحمل اللون الاخضر يحتوي على 
الكلمات الموجودة ضمن الرابط. كما انها تكون مفيدة ضمن الزحف العنكبوتي الخاص بمحركات البحث (29نا1؟31»). 


عند عمل الروابط نتجنب بعض الاشياء ومنها عمل اسم معين ومكرر في روابط الصفحات (عدم تكرار العنوان ضمن الرابط). كما نتجنب عمل الروابط 
الطويلة وغير الهامة. كما نتجنب ايضا عنوان مكرر لكل الصفحات. 


2 . 2223 3ط /عده» . 558 | تعلم البرمجة | 2دهن . 222203 ةط عد ده 1 . جم 


8 
تسهيل التنقل والتصفح داخل الموقع الالكتروني 


التذقل داخل الموقع الالكتروني مهم بالنسبة للشخص المتصفح فالموقع المرتب من حيث البيانات والأقسام والملفات والمجلدات يجعل الموقع سهل 
التصفح والفهم للمستخدم ولمحرك البحث بالإضافة الى سرعة التنقل بين العناوين والصفحات. 


نقوم بعملية التقسيم للموقع والأقسام وكل بند يندرج ضمن القسم الخاص به سواء الاقسام المتفرعة من قسم آخر وهكذا. بالإضافة الى عمل ترتيب 
لمحتوى الموقع من حيث المجلدات والصورة وترتيبها بشكل منظم ومثال على ذلك كما في الصورة: 


اناق 


كما لأاة 


عرنت 

تنلاع 
انانا2 
اتناك 


1 








85 الاع- ممم 


4ه -مم18 ١‏ 


0 195-1999 


|1قمع]م -0 200 


كلا نااك رصاعم ]ال هذا 1 
كات هاأقماقنةا اقرع نات جز ترإصلاة قر 


مرت القماقعهم 





عمل خارطة للموقع بصيغة ,71/11 


تسهل خريطة الموقع والتي تكون من نوع ,75311 على محركات البحث عملية استكشاف محتوى الموقع الالكتروني وصفحاته ويتم عمل خارطة الموقع 
من هذا النوع إما يدويا او عن طريق مواقع على الانترنت تقوم بهذه الوظيفة وبوسطة وضع موقعك الالكتروني واعطائك خارطة للموقع الخاصة بك. 


بعد اتمام عملية انشاء الخارطة الخاصة بالموقع ضمن ملف الر5311 يتم ادراجها في (20015 77211225421 ) ولإنشاء خارطة موقع يمكنك عملها 
على احد المواقع الالكترونية مثل (©612©1:2601 © 5142227 2011 ) . 
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كك 


مثال لخارطة موقع (1/1«) 


لتتملآء0ا تتتتمصطة 15 عع لتتعتستعمل عط 1 1 طق 0م تل صدكة ناه للةتتمخصا ع تجاه نثتنة عتتقط هذ خقء درحبة أمط دعمل م112 لاك كتط 1 


"47 . نا رمت 515 “رت قات لت تم “2 5 ١‏ 55ت 515 ١.‏ اتوم أثر ثر : نزم 5125" -11115 + 


تعه1 ر#نطم رع 22 . متنصطععع . اوور ثر : ووعاعطحعت 1ه 
137 121521 2ر5 . )7ع 212315123> 
21222 اتتقلت “157 2053ن 2ع 1 ومسق لت > 
1121 “> 
 >1121<‏ 
دعم 1 “ةوطخ . ه1211 نطوم رع 22 . متنصطصعع . موود ثر : ووطاعطحمت 1ه 
523137 11ج رع 5 . لأخلاع 2821215123> 
2121222 تقلطت “ 152 053جن دع 12 2 و مق لات > 
1121 ره 
ء م 1212ات كر 
م 212تات كر 
م م 212نات هزر 
.. . 212نات مر 
. 1عنات سر 
. 21تات هر 
م 212نات كر 
.م 1212نات كر 
م 1121ات هر 
٠.‏ . 212نات سر 
. 21تات هر 
.م ء. اتات سر 
11212 
تنه 1 “13-10 #صرطاح . 15اقط_عاعق ارحيطاح رعاعط . متصصط عن . مدر ثر : ووماعتطجدعه 1 > 
م 5 . لاع 5123م نه 
22 2ت #والتقطت “51172 لودع عومسم 0ت > 
1121 ره 
<21نا/ة . . . 2 1ع2نة مر 
<1121 > 
تعم 1 ره “رع 22 . متنطصعط . مدر ثر : ووطاعطحمت 1ه 
21231511137 “رع 5 . لياع 221215123 
521537 125 ” 0 : 000+ 3 2 : 19 : 5 4-0511 4-0 31 2 0ط 135 > 
22 212 توالتق لت “157 5313نت ومع 1ع ومسق لطت > 
1111 “رع 
1121582 / > 


/1121< 
/1121< 
/1121< 
/1121< 
/ 1121 
/ 1111 
”1121< 
/” 11121 << 
,/ 1121 
/ 11121 
/ 1121 


7/1121 








خا خخخ خخ خخ خخ حم اك 








كما في الصورة أعلاه نلاحظ كيفية عمل خارطة للموقع وكمثال على ذلك تم عمل خارطة للموقع الذي قمنا بتطبيقه (التطبيق العام م116م) وتظهر في 
الصورة أعلاه الخارطة وهي تحوي القائنمة ومحتوياتها. 


التحسين الامثل لمحتوى الموقع 


المواقع المثيرة للاهتمام تزيد من الاعتراف بها 


كلما كانت الموقع الالكتروني مثار اهتمام عند الاخرين كلما كانت عملية الزيارة تزداد مع الوقت بالإضافة الى تسويق المتصفحين للموقع 
وإخبار الآخرين للطلاع عليه والشهادة بتميزه وامكانية مشاركته مع الآخرين في المدونات وصفحات التواصل الاجتماعي. لذلك اهمية 
المحتوى عامل مهم في زيادة الزيارات للموقع الالكتروني. 


إثراء المواضيع بالعبارات وعناصر المحتوى بالمصطلحات المتعلقة او التي لها علاقة بالمواضيع. 


في المواضيع التي تقدم ضمن الموقع لابد من اختيار الموضوع الأكثر أهمية وأن يراعى فيه اختيار العبارات المتعلقة بالموضوع وذلك 
لان المستخدم الذي يبحث عن هذا الموضوع قد يبحث عن كلمات اخرى غير العنوان لذلك نهتم بالعبارات والعناصر المرتبطة بالموضوع. 
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حول محتوى الموقع 


في كتابة المواضيع في الموقع الالكتروني لابد من الالتزام ببعض الخصائص ومنها عدم التكلف في كتابة المواضيع وزيادتها ولكن يتم 
كتابة المواضيع بكل سهولة وتسهيل قراءتها. كما يتم تجنب عمل الشروحات أو الكتابة في الصور والسبب لأن هناك مستخدمين يريدون 
نسخ النص أو الشرح بالإضافة الى ان محركات البحث لا تتعرف على محتوى الصور (الشرح والمواضيع). 

كما يفضل ترتيب محتوى المواضيع من حيث التنظيم والتنسيق للنصوص والصور كي يعرف المتصفح بداية ونهاية الموضوع بالإضافة 
للمحتوى وأقسامه. 


التعامل مع الصور في الموقع الالكتروني 


عند عمل محتوى للموقع الالكتروني فإننا نأخذ في عين الاعتبار أهمية وجود الصورة الداعمة للموضوع وعليه فإن علينا دعم الصورة 
بخاصية بسيطة وهي خاصية (216) وقد تعلمناها مسبقا وتفيدنا في ظهور الصورة في البحث عن نص موافق للموضوع الخاص بنا في 
(البحث عن الصور). بالإضافة لتنظيم أماكن الصور وترتيبها وجعلها في مجلدات خاصة بها. 


استخدام وسوم العناوين (5ك128 12»20129) 


تبدأ العناوين من <11> الى <116> حسب الأهمية هذه العناوين تنوع أهمية المحتوى داخل المواضيع فالعناوين الكبيرة تشير للأهمية للمتصفح كماهي 
أيضا اكثر فهما لمحركات البحث ويفهمها محرك البحث حسب الأهمية (حجم النص). 


التعامل مع خوارزميات او برامج البحث 


استخدام ملف ():).101015) 


من الوسائل المستخدمة للتعامل مع محركات البحث انشاء ملف ال010145.)26 وتكمن وظيفة هذا الملف في أنه يخبر محركات البحث في ما اذا كان 
بالإمكان الزحف لبعض اجزاء الموقع وترك بعضه. كما يجب أن يكون اسم الملف بهذا الاسم 01045.66 بالإضافة الى ان يكون في المجلد الرئيس 
للموقع. 

هناك في الموقع بعض الاجزاء التي لا تريد لمحركات البحث الوصول اليها وربما تعتبر غير مفيدة للمستخدم او المتصفح للموقع ولذلك يمكننا الاستعانة 
بملف ال01045.626 واعطاء بعض الاوامر للملف بالزحف لبعض المجلد او الصفحات وترك أخرى. يمكننا عمل الملف يدويا او الاستعانة بأدوات 
جوجل على موقع جوجل من خلال 5161:2601 1:01015.124. كما يمكننا الاستعانة بالإرشادات الموجودة ضمن صفحات الدعم الخاصة بجوجل على 
165 ):< ).01015 11511125. 
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م 
طريقة عمل ملف ).101015 


هنا بعض الاوامر التي يمكننا وضعها ضمن ملف الروبوتس للزحف على الصفحات او عدم الزحف عليها وعلى المجلدات ايضا ومنها : 





* بأسعع ونع ول] 


الكود أعلاه عبارة عن أمر يسمح لجميع العناكب بالزحف لمحتوى الموقع مثل جوجل و ياهو الخ. 


كود ؟ ( : 1215211018) 





الكود أعلاه لمنع محركات البحث من الزحف على الصفحة 117م.3112ع10 والموجودة داخل المجلد 2 زدددآ)2. 


كود" ( : 4110398) 


كتابة الكود كما هو أعلاه يسمح لمحركات البحث للزحف على جميع المجلدات والملفات. 


كود؛ 


م #كتولالةث 


5ط تتولااث 





الكود أعلاه مثال لعملية السماح للزحف على مجلدات معينة وكما في الكود (مجلد 722875 - مجلد وع1121266 ). 


كوده (:511612127) 


لتتحة .نم2 ددع ]1ك نع دا.متدرطاعع ] .جح :صواغخط تمد سم رك 





الكود أعلاه مثال على امر لمحركات البحث او ارشاد لها لملف خارطة الموقع والذي هو من نوع 21و مع تحديد الاسم والمكان للملف ضمن الموقع. 
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ملاحظة ٠‏ نظام جوملا يحوي ملف الروبوتس ).17070145 وموجود مسبقا وغالبا في المواقع الكود المستخدم هو 1(15511089. كما يمكننا الاستفادة 
أكثر حول ملف 1:017015.626 عن طريق الموقع المعروف ب(وء2726 1202045 55:2 1126) . 


استخدام كود (''001011077''-1ع" ) 


لأن الروابط الموجودة على الانترنت من الاولوية لمحركات البحث ولأن الزحف الخاص بمحركات البحث يعطي أولوية للروابط على الانترنت فهناك 
روابط لا نريد من محركات البحث ارشفة او الزحف على صفحات لا نريدها ان تظهر في نتائج محركات البحث يتم استخدام الكود ''01011055'' -1:6»1 
لمنع محركات البحث من ارشفة بعض الروابط . 


دوا صفحة خاصفح '110مئؤمم'"حاعم ''مطامء )2 حتمناعس.متمطءة) عجوو تصاط "معط وه 





كما في الكود أعلاه اضفنا كود المنع على احد الروابط لاحد الصفحات التي لا نريد عرضها على الاخرين ولا ارشفتها او نتائج محركات البحث. 


متابعة وترقية الموقع الالكتروني 


ليكون الموقع الالكتروني الخاص بنا ضمن المواقع الصديقة لمحركات البحث علينا أن نجعل الموقع الالكتروني محط اهتمام ومتابعة لمحتوى الموقع 
وحالته مع محركات البحث وهنا بعض النصائح العامة لمتابعة الموقع الالكتروني والتحسين من ظهوره في النتائج الاولى في محركات البحث: 


اضافة الموقع الالكتروني ضمن حساب خاص في جوجل وربطه واضافته الى محرك البحث جوجل وذلك عن طريق ( 22256©7ط»'75 »6001© 


1015). 
متابعة حالة الموقع في (10015 ©3ع22516ااء'71 ©1ع00)) واصلاح اي اخطاء تعيق أرشفة الموقع. 


ربط الموقع الالكتروني بصفحات التواصل الاجتماعي وامكانية مشاركته في صفحات التواصل من المستخدمين. 
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أدوات مفيدة لتعزيز نجاح الموقع فى 575:0 


ع" "لزاع غ31ثانلا ,51]015آلا ناملا 01 ع©50101 عط 0لا 
5 ++ 200514 1 00 

05 )2111111131212 3110 ,0ض نلاعالا 

آلا ع5 10 03065 لاملا 011 1115 11111اع0)ا ١1انا]ا‏ 
0211121171 11511 2006216 

غ"011نلا 131آننا 30ج ع1 املا [أانلا. 
5 
16 


10021652465 
5 2115 ,31011 1 أ 00 50 3101لا 00111 نامل 11 
215100 111125] دده 5م11 
011103117 5180 313 1005© ناملا ماعط 5!10110. 
أع ١٠‏ 90101062 0101 011 ©36©[16طلعع1 01 5110115ع1ان عناجكا 
1011 رراع11] :دع )كه دصطاء 11 ع206021) 
1101| 5لاء 
ناملا []آلنا 22©15ع11 م6000 /لامط 061111112 
1001 *اع)5 2 تططاء 11 2006216 
5ع نلا. 
013117 32320 ,أتءأقطاعع ,]3م0111 ,(3إلأوع2] 
110112 ») :2511 حططاء 11 20021 
©0001 10111 1165 1أع01110. 
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نم بحمد الله 


66 6 
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الوم 


56 7 


معد الكتاب الالكترونى 
) سيرة ذاتية ( 


الاسم : يوسف صالح علي الجرعي 

تاريخ الميلاد : 975١م‏ 

الجنسية : اليمن تاريخ 

محل الميلاد : المملكة العربية السعودية - الرياض 


الإقامة : الجمهورية اليمنية - أمانة العاصمة 





معلومات التواصل : 

البريد الإلكتروني :12_97115111©7211200.60112© 

رقم الهاتف الجوال: )0.09511١4495٠.٠0(‏ أو جوال + واتس اب (5١٠5ههلا؟ل/الالا095..)‏ 
الدولة : صنعاء - أمانة العاصمة ( اليمن ) 

العنوان الإلكتروني : )710.12 »77371.66 

التعليم والموّهلات: 

بكالوريوس نظم معلومات - جامعة صنعاء (كلية الحاسوب وتكنولوجيا المعلومات). 
دبلوم تصميم مواقع الكترونية ( معهد سيدز). 

المهعارات والخبرة : 

إنشاء وإدارة وتدريب تصميم وادارة مواقع الكترونية. 

تسويق وإعلام إلكتروني. 

تصميم وإدارة نشرات إلكترونية. 


صيانة وحماية حاسوب. 
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